@font-face {
    font-family: "AvenirNext"; 
    src: url("/Fonts/AvenirNextLTPro-Regular.otf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "AvenirNext"; 
    src: url("/Fonts/AvenirNextLTPro-It.otf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "AvenirNext"; 
    src: url("/Fonts/AvenirNextLTPro-Medium.otf");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "AvenirNext"; 
    src: url("/Fonts/AvenirNextLTPro-Demi.otf");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "AvenirNext"; 
    src: url("/Fonts/AvenirNextLTPro-DemiCn.otf");
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: "Knockout69";
    src: url("/Fonts/Knockout-69.otf");
    font-weight: 200;
    font-style: normal;
}

:root {
    --fs-tiny: 12px;
    --fs-small: 14px;
    --fs-normal: 16px;
    --fs-large: 32px;

    /*typical title + subtitle + body combinations*/
    --fs-small-title: 32px;
    /*small*/
    /*tiny*/

    --fs-medium-title: 32px;
    /*normal*/
    /*small*/

    --fs-large-title: 40px;
    --fs-large-subtitle: 18px;
    /*normal*/

    --fs-huge-title: 56px;
    --fs-huge-subtitle: 24px;
    /*normal*/

    --fs-showcase-title: 88px;
    --fs-showcase-subtitle: 19px;
}

@media screen and (max-width: 768px) {
    :root {
        --fs-tiny: 10px;
        --fs-small: 12px;
        --fs-normal: 14px;
        --fs-large: 32px;

        /*typical title + subtitle + body combinations*/
        --fs-small-title: 16px;
        /*small*/
        /*tiny*/

        --fs-medium-title: 16px;
        /*normal*/
        /*small*/

        --fs-large-title: 32px;
        --fs-large-subtitle: 16px;
        /*normal*/

        --fs-huge-title: 35px;
        --fs-huge-subtitle: 21px;
        /*normal*/

        --fs-showcase-title: 56px;
        --fs-showcase-subtitle: 16px;
    }
}