@layer typography {
    /***
    * Vertical rhythm: 1rem
    */
    html {
        font-family: "Open Sans";
        line-height: 1.5;
        --grid-row-height: 1rem;
        --grid-color: #008822;
        --grid-background-color: #00BB3301;
    }

    /* @link https://utopia.fyi/type/calculator?c=360,18,1.25,1240,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    :root {
    --font--size--2: clamp(0.7035rem, 0.7268rem + -0.03vw, 0.72rem);
    --font--size--1: clamp(0.9rem, 0.8846rem + 0.0686vw, 0.9377rem);
    --font--size-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --font--size-1: clamp(1.4063rem, 1.2999rem + 0.4727vw, 1.6663rem);
    --font--size-2: clamp(1.7578rem, 1.5683rem + 0.8424vw, 2.2211rem);
    --font--size-3: clamp(2.1973rem, 1.8849rem + 1.3881vw, 2.9607rem);
    --font--size-4: clamp(2.7466rem, 2.2556rem + 2.182vw, 3.9467rem);
    --font--size-5: clamp(3.4332rem, 2.6855rem + 3.3231vw, 5.2609rem);
    }

    /* @link https://utopia.fyi/type/calculator?c=360,16,1.25,1240,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    :root {
    --font--size--2: clamp(0.64rem, 0.614rem + 0.1154vw, 0.7035rem);
    --font--size--1: clamp(0.8rem, 0.7437rem + 0.2504vw, 0.9377rem);
    --font--size-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
    --font--size-1: clamp(1.25rem, 1.0797rem + 0.7568vw, 1.6663rem);
    --font--size-2: clamp(1.5625rem, 1.2931rem + 1.1975vw, 2.2211rem);
    --font--size-3: clamp(1.9531rem, 1.5409rem + 1.832vw, 2.9607rem);
    --font--size-4: clamp(2.4414rem, 1.8256rem + 2.7368vw, 3.9467rem);
    --font--size-5: clamp(3.0518rem, 2.148rem + 4.0166vw, 5.2609rem);
    }

    #grid {
        opacity: 25%;
        max-width: 900px;
        margin: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Montserrat";
        font-weight: 600;
    }

    h1.hero {
        font-size: var(--font--size-5);
        font-weight: 900;
        line-height: 1.2;
        margin: 2rem 0;
    }

    h1 {
        color: var(--heading1-color);
        font-size: 2rem;
        font-size: var(--font--size-4);
        font-weight: 800;
        margin: 1rem 0;
    }

    h2 {
        color: var(--heading1-color);
        font-size: 1.5rem;
        font-size: var(--font--size-3);
        font-weight: 800;
        margin: 1rem 0;
    }

    h3 {
        color: var(--heading1-color);
        font-size: 1.25rem;
        font-size: var(--font--size-2);
        font-weight: 800;
        margin: 1rem 0;
    }

    h4 {
        font-size: 1.25rem;
        font-size: var(--font--size-1);
        font-weight: 700;
        margin: 1rem 0;
    }

    h5 {
        color: var(--heading1-color);
        font-size: 1rem;
        font-weight: 700;
        margin: 1rem 0;
    }

    h6 {
        font-size: 1rem;
        font-weight: 600;
        margin: 1rem 0;
    }

    p {
        margin: 1rem 0;
        font-size: var(--font--size-0);
    }

    tt,
    code,
    kbd,
    samp,
    pre,
    xmp,
    plaintext,
    listing {
        font-family: "Monaspace Neon";
        line-height: normal;
    }

    small {
        font-size: 0.75rem;
        display: block;
    }
}