@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.js";

@layer base {
    @font-face {
        font-family: "DepartureMono";
        src: url("/fonts/DepartureMono-Regular.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "FiraCode";
        src: url("/fonts/FiraCode-Regular.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "FiraCode";
        src: url("/fonts/FiraCode-Bold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    html {
        overflow-y: scroll;
        color-scheme: light;
        background-color: oklch(87.1% 0.006 286.286);
        font-family: "FiraCode", monospace;
    }

    html.dark {
        color-scheme: dark;
        background-color: oklch(21% 0.006 285.885);
    }

    html,
    body {
        @apply h-full w-full antialiased;
        @apply bg-white dark:bg-zinc-900;
        @apply text-black/75 dark:text-white/75;
    }

    body {
        @apply relative flex flex-col;
    }

    main {
        @apply flex flex-col flex-1 bg-zinc-300 dark:bg-zinc-900;
    }

    header {
        @apply border-b;
        @apply transition-all duration-300 ease-in-out;
    }

    header:not(.scrolled) {
        @apply bg-transparent border-transparent;
    }

    header.scrolled {
        @apply bg-zinc-200/75 dark:bg-zinc-950/50;
        @apply border-black/10 dark:border-white/25;
        @apply backdrop-blur-sm saturate-200;
    }

    article {
        @apply prose dark:prose-invert max-w-full pb-12;
    }

    .page-heading {
        @apply font-semibold text-black dark:text-white;
    }

    .blend {
        @apply transition-all duration-300 ease-in-out;
    }

    .animate {
        opacity: 0;
        transform: translateY(5px);
        animation: fadeInUp 1s forwards;
        animation-delay: 0.5s;
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(5px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    article img {
        padding-top: 20px;
        padding-bottom: 20px;
        display: block;
        margin: 0 auto;
    }
}