/*#region HEADER*/
header {
    margin-top: 3rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    height: 40rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}
#banner-title {
    font-size: 5vw;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.word {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-transform: uppercase;
    gap: 0.35em;
    height: 5vw;
}
.char {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    height: 0.1vw;
    user-select: none;
    opacity: 0;
    transition: 150ms ease;
    transition-property: height, opacity;
}
.char::selection {
    background-color: rgba(0, 0, 0, 0);
}
.word:nth-of-type(1) > .char:first-of-type {color: rgb(var(--green)); opacity: 1;}
.word:nth-of-type(2) > .char:first-of-type {color: rgb(var(--orange)); opacity: 1;}
.word:nth-of-type(3) > .char:first-of-type {color: rgb(var(--burgundy)); opacity: 1;}
.char.show {
    height: 5vw;
    opacity: 1;
}
/*#endregion HEADER*/

/*#region PARALLAX */
.parallax {
    --offset: 10vw;
    width: 100%;
    height: 25rem;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    clip-path: polygon(0% var(--offset), 100% 0%, 100% calc(100% - var(--offset)), 0% 100%);
}
.parallax[data-parallax="1"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/1.jpg");}
.parallax[data-parallax="2"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/2.jpg");}
.parallax[data-parallax="3"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/3.jpg");}
.parallax[data-parallax="4"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/4.jpg");}
.parallax[data-parallax="5"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/5.jpg");}
.parallax[data-parallax="6"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/6.jpg");}
.parallax[data-parallax="7"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/7.jpg");}
.parallax[data-parallax="8"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/8.jpg");}
.parallax[data-parallax="9"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/9.jpg");}
.parallax[data-parallax="10"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/10.jpg");}
.parallax[data-parallax="11"] {background-image: url("https://cdn.felx.hu/assets/img/parallax/11.jpg");}
/*#endregion PARALLAX */


@media (max-width: 768px) {
    header {
        min-height: 25rem;
        background-size: auto 100lvh;
        background-position: top center;
    }
    #banner-title {
        font-size: 6.5vw;
        transform: rotateX(180deg) rotateZ(270deg);
    }
    .word {
        height: 6.5vw;
    }
    .char {
        transform: rotateX(180deg) rotateZ(270deg);
    }
    .char.show {
        height: 6.5vw;
    }
    .parallax {
        height: 18rem;
        background-size: auto 100lvh;
        background-position: bottom center;
    }
}