:root {
    --creativeYellow: #FFEC00;
    --grey: #181818;
    --black: #000;
    --white: #fff;

    --transparent-white-low: rgba(255, 255, 255, 0.08);
    --transparent-white-medium: rgba(255, 255, 255, 0.5);
}

::selection {
    color: var(--creativeYellow);
    background: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* By default is inline and causing empty space below img  */
}

.outline {
    -webkit-text-stroke: 0.094rem var(--white);
    color: transparent;
}

.white {
    color: var(--white);
}

/* ------------------- flicker při načítání JS ------------------- */

[x-cloak] {
    display: none !important;
}


/* ------------ScrollBar--------------- */
/* width */
::-webkit-scrollbar {
    width: 0.45rem;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.30);
    border-radius: 1.25rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.50);
}

.yellow {
    color: var(--creativeYellow);

}

/* Font styles */
h1 {
    font-family: 'Saira Extra Condensed', sans-serif;
    font-size: 10rem;
    font-style: normal;
    font-weight: 700;
    line-height: 106%;
    color: var(--transparent-white-medium);
}

h2 {
    font-family: 'Saira Extra Condensed', sans-serif;
    font-size: 5.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 106%;
}

h3 {
    font-family: 'Saira Extra Condensed', sans-serif;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 106%
}

.text-l {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.text-m, p {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.text-m-bold {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}

.text-s {
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.wide-l {
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.4375rem;
    text-transform: uppercase;
}

/* Responsive fonts */

@media screen and (max-width: 1480px) {
    h1 {
        font-size: 8.75rem;
    }
    
    h2 {
        font-size: 5rem;
    }

    h3 {
        font-size: 2.625rem;
    }
    
    .text-l {
        font-size: 1.4375rem;
    }

    .text-m, p {
        font-size: 1.0625rem;
    }
    
    .text-m-bold {
        font-size: 1.0625rem;
    }
    
    .text-s {
        font-size: 0.875rem;
    }
    
    .wide-l {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 6.25rem;
    }
    
    h3 {
        font-size: 2.375rem;
    }

    h2 {
        font-size: 4rem;
    }

    .text-l {
        font-size: 1.25rem;
    }
    
    .text-m, p {
        font-size: 1rem;
    }
    
    .text-m-bold {
        font-size: 1rem;
    }
    
    .text-s {
        font-size: 0.8125rem;
    }
    
    .wide-l {
        font-size: 0.6875rem;
    }
}

@media screen and (max-width: 720px) {
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2.75rem;
    }
    
    
    h3 {
        font-size: 1.875rem;
    }
    
    .text-l {
        font-size: 1.125rem;
    }

    .text-m, p {
        font-size: 0.9375rem;
    }
    
    .text-m-bold {
        font-size: 0.9375rem;
    }
}