@font-face {
    font-display: swap;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/nunito-sans-v15-latin-700.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Noto Sans Display';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-display-v26-latin-regular.woff2') format('woff2');
}

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

@layer base {
    body {
        @apply font-body;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-heading tracking-tight;
    }
    hyphens-auto {
        hyphenate-limit-chars: 5 3;
    }
}
@layer components {
    .youtube {
        @apply rounded p-2 bg-base-200;
    }

    input.narrow-reading-toggle {
        display: none;
    }
    body:has(label[for=narrow-reading-toggle]) input.narrow-reading-toggle:checked + .reading-toggle-target {
        @apply max-w-3xl;
    }

    .fade-away {
        -webkit-mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
        mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
    }

    .prose div > pre, .prose > pre {
        @apply bg-inherit text-inherit rounded-none;
    }
    .prose pre:has(code) {
        @apply border-2 border-current;
    }
}
