body {
    /*dimensions and spacing variables*/
    /* určuje v akých jednotkách sa budú počítať všetky rozmery vw, px, em														*/
    --unit: 1vw;
    /* breakpoint konštanta mení sa pri break pointoch aby sa veľkosti automaticky prispôsobili pre rôzne veľkosti obrazovky	*/
    --const: 0.32;
    /* veľkosť unit prepočítaný breakpoint konštantou pre východziu veľkosť v tomto prípade je to mobile						*/
    --size: calc(var(--unit) * var(--const));
    /* colors */
    --foreground: black;
    --background: white;
    --highlight: #fe1b06;
    /* sizes */
    --size-2xs: calc(var(--size) * 4);
    --size-xs: calc(var(--size) * 8);
    --size-s: calc(var(--size) * 16);
    --size-m: calc(var(--size) * 24);
    /* default */
    --size-l: calc(var(--size) * 32);
    --size-xl: calc(var(--size) * 40);
    --size-2xl: calc(var(--size) * 48);
    --size-3xl: calc(var(--size) * 56);
    --size-4xl: calc(var(--size) * 64);
    --size-5xl: calc(var(--size) * 72);
}

* {
    box-sizing: border-box;
    vertical-align: baseline;
}

.hidden {
    display: none;
}

html {}

body {
    background-color: var(--background);
    color: var(--foreground);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* prevents site scrolling horizontally */
}

a {
    color: var(--foreground);
}

a:hover {
    color: var(--highlight);
}

.logo {
    text-decoration: none;
}

/* Mobile-first base styles above */


/* Tablet and larger screens */

@media (min-width: 768px) {
    body {
        --const: 0.2;
        /* Adjust constant for larger screens */
    }
}


/* Desktop screens */

@media (min-width: 900px) {
    body {
        --const: 0.12;
        /* Further adjust constant for desktop */
        /* sizes */
        --size-2xs: calc(var(--size) * 4);
        --size-xs: calc(var(--size) * 8);
        --size-s: calc(var(--size) * 16);
        --size-m: calc(var(--size) * 24);
        /* default */
        --size-l: calc(var(--size) * 32);
        --size-xl: calc(var(--size) * 40);
        --size-2xl: calc(var(--size) * 48);
        --size-3xl: calc(var(--size) * 80);
        --size-4xl: calc(var(--size) * 120);
        --size-5xl: calc(var(--size) * 160);
    }
}