/* Fonts include here */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');


/* Fonts end */

:root {
    --global--size-base: 10px;
    --global--border-size: 1px;
    --button--border-size: 1px;
    --button--padding-block: 0.9em;
    --button--padding-inline: 2.0em;
    --button--border-radius: 5em;
    --text--line-height: 1.4;
    --heading--line-height: 1.15;
    --site-header--height: 9rem;
    --navigation--button-size: 3.5rem;
}

/**
*  Scale website for bigger displays with pixel ratio: 1
*  
*/

@media only screen and (min-width: 1941px) {
    :root {
        --global--size-base: 11.25px;
    }
}

@media only screen and (min-width: 2241px) {
    :root {
        --global--size-base: 12.5px;
    }
}

@media only screen and (min-width: 2561px) {
    :root {
        --global--size-base: 13.75px;
    }
}

@media only screen and (min-width: 2881px) {
    :root {
        --global--size-base: 15px;
    }
}

@media only screen and (min-width: 3201px) {
    :root {
        --global--size-base: 16.25px;
    }
}

@media only screen and (min-width: 3521px) {
    :root {
        --global--size-base: 17.5px;
    }
}

@media only screen and (min-width: 3841px) {
    :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 {
    font-size: var(--global--size-base);
    scroll-behavior: smooth;
    /* scroll-padding-top: 10rem; */
    overflow-x: hidden;
}
a {
    text-underline-offset: 0.20em;
    text-decoration-thickness: 1px !important;
}

.blend-difference {
    mix-blend-mode: difference;
}