@font-face {
    src: url("/public/WarblerText-Regular-Edu.woff2") format("woff2");
    font-family: "WarblerText";
    font-style: normal;
    font-weight: 400;
}

@font-face {
    src: url("/public/WarblerText-Italic-Edu.woff2") format("woff2");
    font-family: "WarblerText";
    font-style: italic;
    font-weight: 400;
}

@font-face {
    src: url("/public/WarblerText-Bold-Edu.woff2") format("woff2");
    font-family: "WarblerText";
    font-style: normal;
    font-weight: 700;
}

@font-face {
    src: url("/public/WarblerText-BoldItalic-Edu.woff2") format("woff2");
    font-family: "WarblerText";
    font-style: italic;
    font-weight: 700;
}

:root {
    color-scheme: light dark;
    --background-color: light-dark(oklch(0.98 0.02 90),
    oklch(0.1957 0.0062 337.89)
    );

    --secondary-background-color: oklch(0.6257 0.0098 89.66);

    --text-color: light-dark(
            oklch(0.15 0.02 220),
            oklch(0.9491 0 0)
    );

    --accent-color: light-dark(oklch(0.7 0.15 360),
    oklch(0.8076 0.11875000000000004 360)
    );
}

@media screen and (max-width: 500px) {
    body {
        max-width: 20rem !important;
        font-size: 1.2em !important;
    }
}

body {
    text-align: left;
    max-width: 40rem;
    margin: 0 auto;
    font-family: "Warbler Text", "Libre Baskerville", ui-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1.4em;
}

.me {
    color: var(--accent-color);
}

a {
    color: var(--text-color);
    text-decoration-color: var(--accent-color);
}

a:hover, a:focus {
    color: var(--accent-color)
}

p {
    text-wrap: balance;
}

.mute {
    opacity: 70%;
}

.banner {
    padding: 10px 0;
    position: relative;
    width: 100%;
    color: var(--secondary-background-color);
}

footer {
    bottom: 0;
}

header {
    top: 0;
}