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

    --col-white: rgb(250, 250, 250);
    --col-black: rgb(5, 5, 5);
    --col-lightgray: rgb(25, 25, 25);

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

    --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;

    /* --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: 1280px) {
    :root {
    --font-size: 15px;
    --line-height: 17px;
    }
} 

@media (max-width: 1024px) {
    :root {
        --font-size: 14px;
        --line-height: 16px;
        --thickness-bigger: 2px;
        --thickness-smaller: 1px;
        }   
} 

@media (max-width: 768px) {
    :root {
        --font-size: 13px;
        --line-height: 15px;
        }
} 

@media (prefers-color-scheme: light) {
    :root {
        --col-white: rgb(5, 5, 5);
        --col-lightgray: rgb(230, 230, 230);
        --col-black: rgb(250, 250, 250);        
    }
}