:root {
    --border-radius: 0px;

    --col-white: rgb(250, 250, 250);
    --col-white--area-transparent: rgb(250, 250, 250, 0);
    --col-white--area: rgba(250, 250, 250, .8);
    --col-white--area-hover: rgba(250, 250, 250, 1);
    --col-black: rgb(5, 5, 5);
    --col-lightgray: rgb(25, 25, 25);

    --font-size-ultra: 120px;
    --line-height-ultra: 126px;

    --font-size-extra: 50px;
    --line-height-extra: 52px;

    --font-size-large: 26px;
    --line-height-large: 28px;

    --font-size-medium: 18px;
    --line-height-medium: 20px;

    --font-size-small: 15px;
    --line-height-small: 17px;

    --opacity: .85;
    --opacity-active: 1;

    --padding: 10px;

    --spacer-big: 76px;
    --stroke-width: 1.5px;

    --thickness-bigger: 4px;
    --thickness-smaller: 2px;

    --underline-offset-bigger: 4px;
    --underline-offset-smaller: 2px;

    /* --transition-duration: .25s; */
    --transition-duration: .5s;
    --transition-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

::selection {
    color: var(--col-black);
    background: var(--col-white);
}

@media (max-width: 1920px) {
    :root {
    --font-size-extra: 42px;
    --line-height-extra: 44px;
    --font-size-ultra: 90px;
    --line-height-ultra: 93px;
    --font-size-medium: 18px;
    --line-height-medium: 20px;
    --font-size-small: 15px;
    --line-height-small: 17px;
    }
}

@media (max-width: 1280px) {
    :root {
    --font-size-extra: 35px;
    --line-height-extra: 37px;
    --font-size-ultra: 50px;
    --line-height-ultra: 52px;
    --font-size-large: 24px;
    --line-height-large: 26px;
    --font-size-medium: 15px;
    --line-height-medium: 17px;
    --font-size-small: 15px;
    --line-height-small: 17px;
    }
} 

@media (max-width: 1024px) {
    :root {
        --font-size-large: 18px;
        --line-height-large: 20px;
        --font-size-ultra: 40px;
        --line-height-ultra: 42px;
        --font-size-medium: 14px;
        --line-height-medium: 16px;
        --font-size-small: 14px;
        --line-height-small: 16px;
        --thickness-bigger: 2px;
        --thickness-smaller: 1px;
        --underline-offset: 2px;
        }   
} 

@media (max-width: 768px) {
    :root {
        --font-size-ultra: 30px;
        --line-height-ultra: 32px;
        --font-size-extra: 26px;
        --line-height-extra: 28px;
        --font-size-large: 16px;
        --line-height-large: 18px;
        --font-size-medium: 13px;
        --line-height-medium: 15px;
        --font-size-small: 13px;
        --line-height-small: 15px;
        }
} 

@media (max-width: 768px) {
    :root {
        --font-size-ultra: 28px;
        --line-height-ultra: 30px;
        }
} 

@media (prefers-color-scheme: light) {
    :root {
        --col-white: rgb(5, 5, 5);
        --col-white--area-transparent: rgb(5, 5, 5, 0);
        --col-white--area: rgba(5, 5, 5, .8);
        --col-white--area-hover: rgba(5, 5, 5, 1);
        --col-lightgray: rgb(230, 230, 230);
        --col-black: rgb(250, 250, 250);        
    }
}