/* You can add global styles to this file, and also import other style files */
@import "tailwindcss";

/* apply todo css */
app-markdown {
  @layer base {
    body {
      @apply bg-gray-50 text-gray-800 font-sans leading-relaxed text-base;
    }

    h1 {
      @apply text-3xl font-bold text-gray-900 mt-8 mb-4;
    }

    h2 {
      @apply text-2xl font-semibold text-gray-800 mt-6 mb-3;
    }

    h3 {
      @apply text-xl font-semibold text-gray-700 mt-5 mb-2;
    }

    h4,
    h5,
    h6 {
      @apply text-xl font-medium text-gray-600 mt-4 mb-2;
    }

    a {
      @apply text-blue-600 hover:text-blue-800 transition-colors underline;
    }

    ul {
      @apply list-disc pl-6 mb-4;
    }
    ol {
      @apply list-decimal pl-6 mb-4;
    }

    li {
      @apply mb-1;
    }

    table {
      @apply w-full border-collapse shadow-sm bg-white my-6;
    }

    th,
    td {
      @apply border border-gray-200 px-4 py-2 text-left;
    }

    th {
      @apply bg-gray-100 font-semibold;
    }

    tr:nth-child(even) {
      @apply bg-gray-50;
    }
    blockquote {
      @apply italic bg-gray-200 rounded-md backdrop-blur-md p-3;
    }
    p {
      @apply mb-2;
    }
  }
}