@media only screen and (min-width: 320px) {
    :root{
        --main-font: 'Albert Sans', sans-serif;
        --title-font: 'Albert Sans', sans-serif;
    }
    
    html, body{
        font-family: 'Albert Sans', sans-serif;
        font-size:14px;
    }
    h1, h2, h3, .block-editor :where(.editor-styles-wrapper) :is(h1, h2, h3) {
        font-family: var(--title-font);
    }

    h4, h5, h6, .block-editor :where(.editor-styles-wrapper) :is(h4, h5, h6) {
        font-family: var(--title-font);
    }
    
    h1 {
        font-weight: 600;
        font-size: 2.4rem;
    }

    h2 {
        font-size: 2.2rem;
        font-weight: 600;
    }

    h2.larger-h2 {
        font-size: 2.4rem;
        font-weight: 600;
    }

    h3 {
        font-size: 1.8rem;
        font-weight: 600;
    }

    h4 {
        font-size: 1.2rem;
        font-weight: 600;
        font-family: var(--title-font);
    }

    h5 {
        font-size: 1rem;
        font-weight: 600;
        font-family: var(--title-font);
    }


    a {
        font-size: 1rem;
        font-weight:600;
    } 

    .main-navigation .main-nav ul li a {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
    }

    p {
        font-size: 1em;
        line-height:1.6em;
    }

    .larger-text {
        font-size: 1.25rem;
    }



}
@media only screen and (min-width: 768px) {
    html, body{
        font-size:14px;
    }

}

@media only screen and (min-width: 990px) {
    html, body{
        font-size: 14px;
    }
    h1 {
        font-size: 3.6rem;
    }
    h2 {
        font-size: 3rem;
    }
    h5 {
        font-size: 1rem;
    }
    .main-navigation .main-nav ul li a {
        font-size: min(1vw, 1.1rem);
    }
    
}

@media only screen and (min-width: 1280px) {
    
}