@import "tailwindcss";

@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme {
    --font-*: initial;
    --font-text: Open Sans, sans-serif;
    --font-heading: Montserrat, sans-serif;

    --animate-pulse: pulse 2s infinite ease-out;

    --radius: 0.3rem;

    --border-width-3: 3px;
    --border-width-5: 5px;
    --border-width-7: 7px;

    --shadow-box: 3px 3px 0 #000;
    --shadow-reverse-box: -3px 3px 0 #000;
    --shadow-box-white: 3px 3px 0 #fff;
    --shadow-reverse-box-white: -3px 3px 0 #fff;
    --shadow-link: inset 0 -2px oklch(0.714 0.203 305.504);
    --shadow-link-hover: inset 0 -25px 0 oklch(0.714 0.203 305.504);

    --grid-template-columns-hero: minmax(auto, 15.625rem) auto;

    @keyframes pulse {
        0% {
            opacity: 100%;
        }
        50% {
            opacity: 20%;
        }
        100% {
            opacity: 100%;
        }
    }
}

@utility text-shadow-2 {
    text-shadow: 2px 2px var(--color-purple-400);
}

@utility text-shadow-3 {
    text-shadow: 3px 3px var(--color-purple-400);
}

@layer base {
    @font-face {
        font-family: "Montserrat";
        src: url("/fonts/montserrat.ttf") format("truetype");
        font-display: swap;
    }

    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/open-sans.ttf") format("truetype");
        font-display: swap;
    }
}

span[data-line] {
    padding-inline: 1.5rem;
}

span[data-highlighted-line] {
    background-color: #c792ea66;
    border-left: 4px solid #c792ea;
}
