@font-face {
    font-family: "Merriweather";
    font-style: italic;
    font-weight: 300 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/static/Merriweather-Italic-Variable.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 300 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/static/Merriweather-Variable.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        background-repeat: no-repeat;
    }
    * {
        padding: 0;
        margin: 0;
    }
    html {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        block-size: 100%;
    }
    body {
        min-block-size: 100%;
    }
    img,
    iframe,
    audio,
    video,
    canvas {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }
    svg {
        max-inline-size: 100%;
    }
    svg:not([fill]) {
        fill: currentColor;
    }
    input,
    button,
    textarea,
    select {
        font: inherit;
    }
    textarea {
        resize: vertical;
    }
    fieldset,
    iframe {
        border: none;
    }
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }
    p {
        text-wrap: pretty;
        font-variant-numeric: proportional-nums;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-variant-numeric: lining-nums;
    }
    p,
    blockquote,
    q,
    figcaption,
    li {
        hanging-punctuation: first allow-end last;
    }
    input,
    label,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1;
    }
    math,
    time,
    table {
        font-variant-numeric: tabular-nums lining-nums slashed-zero;
    }
    code {
        font-variant-numeric: slashed-zero;
    }
    table {
        border-collapse: collapse;
    }
    abbr {
        font-variant-caps: all-small-caps;
        text-decoration: none;
        &[title] {
            cursor: help;
            text-decoration: underline dotted;
        }
    }
    sup,
    sub {
        line-height: 0;
    }
    :disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }
    :focus-visible {
        outline-offset: 0.2rem;
    }
}

body {
    background-color: antiquewhite;
    font-family: "Merriweather", serif;
}

ul,
ol {
    padding-left: 1rem;
}

header {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 80ch;
}

header > h1 {
    text-align: center;
}

header > nav {
    display: grid;
    justify-items: center;
}

header > nav > ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 2rem;
    padding: 0;
}

main {
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 80ch;
}