@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;600;700&family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');

 :root {
 
 /* --site-margin: 5vw;
 --site-width: 192rem;
 --wide-width: 172rem;
 --content-width: 120rem;
 
 --content-size: min(100% - calc(2 * var(--site-margin)), var(--content-width)); 
 --wide-size: min(100% - calc(2 * var(--site-margin)), var(--wide-width)); 
 --full-size: min(100% - calc(2 * var(--site-margin)), var(--site-width)); */


    --global--size-base: 10px;
    --global--border-size: 1px;
    --button--border-size: 0px;
    --button--padding-block: 1em;
    --button--padding-inline: 2em;
    --button--border-radius: 5rem;
    --text--line-height: 1.3;
    --heading--line-height: 1.2;
    --site-header--height: 8rem;
    --navigation--button-size: 4rem;

    --global--scale-multi: 1;
}

/* Document settings */


/**
*  scale factor for desktop displays with pixel ratio: 2
*/
@media only screen and (-webkit-device-pixel-ratio: 2) {
    :root {
        --global--scale-multi: 1.5;
    }
}
/**
*  remove scale factor for mobile displays
*/
@media only screen and (hover: none) and (pointer: coarse){
    :root {
        --global--scale-multi: 1;
    }    
}


/**
*  Scale website for bigger displays with pixel ratio: 1
*  remove dynamic text size
*/
@media only screen and (max-width: 782px) {
    :root {
        --global--size-base: 9px;
    }
}
@media only screen and (min-width: 1200px) {
    :root {
        --global--size-base: 9px;
    }
}
@media only screen and (min-width: 1600px) {
    :root {
        --global--size-base: 9px;
    }
}
@media only screen and (min-width: 1920px) {
    :root {
        --global--size-base: 10px;
    }
}
@media only screen and (min-width: 2880px) {
    :root {
        --global--size-base: 15px;
    }
}
@media only screen and (min-width: 3840px) {
    :root {
        --global--size-base: 20px;
    }
}
@media only screen and (min-width: 5760px) {
    :root {
        --global--size-base: 30px;
    }
}
@media only screen and (min-width: 7680px) {
    :root {
        --global--size-base: 40px;
    }
}
/* HTML tag */
html {
    font-size: calc(var(--global--size-base) * var(--global--scale-multi));
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
    color: currentColor;
}