* { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; color: inherit; scrollbar-width: none; -webkit-tap-highlight-color : transparent; }

@font-face {
    font-family: "Roboto Condensed Regular";
    src: url(../fonts/Roboto_Condensed/static/RobotoCondensed-Regular.ttf);
}

@font-face {
    font-family: "Roboto Condensed Light";
    src: url(../fonts/Roboto_Condensed/static/RobotoCondensed-Light.ttf);
}

.container {
    width: 100vw;
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: -100;
    opacity: 0.75;
}

header {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    justify-content: end;

    width: 100%;

    padding: 25px 25px;
    z-index: 100;
    transition: .25s color;
    
    &.activate {
        color: #fff;
    }
    
    & .remote {
        font-family: "Roboto Condensed Regular";
        text-transform: uppercase;
        font-size: 20px;
        line-height: 17px;
        cursor: pointer;
        user-select: none;
    }

    & > a {
        font-family: "Roboto Condensed Regular";
        text-transform: uppercase;
    }
}

.remote-display {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;

    background: #000;
    color: #fff;
    font-size: 24px;
    text-transform: capitalize;
    font-family: "Roboto Condensed Light";
    pointer-events: none;
    opacity: 0;
    transition: .25s opacity;
    z-index: 50;

    &.activate {
        opacity: 1;
        pointer-events: all;
    }

    & ul {
        display: flex;
        gap: 200px;

        & li.current {
            border-bottom: 1px solid;
        }
    }
}

section {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100vh;

    &.section-01 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.section-02 {
        position: relative;
        overflow: hidden;

        & .bg-parallax {
            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            background-image: url(https://images.unsplash.com/photo-1753181070351-9e25a5ebffc8?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: -100;
        }
    }

    & .logo {
        font-family: "Roboto Condensed Regular";
        text-transform: uppercase;
        font-size: 32px;
        text-align: center;
    }
    
    & .text-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;

        font-family: "Roboto Condensed Regular";
        color: #fff;

        & .text-01 {
            font-size: 20px;
        }

        & .text-group {
            display: flex;
            gap: 25px;
        }
    }
}


@media (max-width: 500px) {
    .remote-display ul {
        gap: 100px;
    }

    .section-02 {
        text-align: center;

        & .text-group {
            flex-direction: column;
        }
    }
}