@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    a[href]:not([class*=text]) {
        @apply text-primary-500 hover:text-primary-600
    }

    .container {
        @apply grid grid-cols-12 mx-auto gap-4
    }

    .header {
        @apply col-span-12 flex gap-2 p-2.5;

        .logo {
            @apply text-primary text-2xl
        }
    }

    .sidebar {
        @apply col-span-2
    }

    .content {
        @apply col-span-10
    }

    dl {
        @apply grid grid-cols-12;
        dt {
            @apply col-span-full
        }
        dd {
            @apply col-span-full col-start-2;
            &:last-of-type {
                @apply mb-2 
            }
        }

    }
}