@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poor+Story&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lexend:wght@100..900&family=Poor+Story&display=swap');

::-webkit-scrollbar {
    width: 0; /* Hide scrollbar in WebKit browsers */
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    background: white;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;

}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-20px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0px);
        transform: none;
    }
}

@keyframes fadeup {
    from {
        filter: blur(5px);
        opacity: 0.2;
        transform: scale(100%) translateY(40px);
    }

    to {
        filter: blur(0px);
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeside {
    from {
        opacity: 0.2;
        transform: scale(100%) translateX(-50px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0px);
        transform: none;
    }
}
@keyframes fadesideleft {
    from {
        opacity: 0.2;
        transform: scale(100%) translateX(50px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadescale {
    from {
        opacity: 0;
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0px);
    }
}

.fadein {
    animation-name: fadein;
    animation-duration: 1s;
}

body {
    background: black;
    background-size: cover;
    overflow: clip;
}

#left_container {
    display: block;
    width: 40vw;
    padding-left: 5vw;
    padding-right: 0;
    padding-top: 3.5vw;
    padding-bottom: 3.5vw;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;

}



.images{
    width: 8vw;
}
.buttons {
    color: white;
    font-family: 'DM Serif Display',serif;
    font-size: 3vw;
    margin-left: 0;
    transition: all 0.25s;
}

    .buttons:hover {
        font-size: 3.5vw;
        color: tomato;
    }


.fade-out-div {
    transition: all 0.5s ease;
    opacity: 1;
}

    .fade-out-div.fade-out {
        opacity: 0;
    }

.title{
    font-size: 10vw;
}
.texts {
    font-size: 1vw;
}
.sub_title {
    font-size: 2vw;
}

.rightcontainer {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    animation-name: fadeside;
    animation-duration: 1s;
    z-index: -1;
}

.video{
    right:10%;
}

#logo {
    position: fixed;
    display: block;
    width: 10vw;
    left: 0vw;
    top: 0;
    padding-left: 5vw;
    padding-top: 2vw;
    transition: all 0.25s;
    z-index: 5;
    animation-name: fadescale;
    animation-duration: 1s;
    opacity: 1;
}
    #logo:hover {
        opacity: 0.5;
    }

.logos {
    display: inline-block;
    width: 10vw;
    padding-right: 2vw;
    padding-top: 2vw;
    transition: all 0.25s;
    z-index: 5;
    animation-name: fadescale;
    animation-duration: 1s;
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    #left_container {
        display: block;
        width: 100vw;
        height: 60vh;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 15vw;
        overflow-x: hidden;
        --mask: linear-gradient(to bottom, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 80%, 
        rgba(0,0,0, 0) 99%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask); 
    mask: var(--mask);
    }
    .rightcontainer {
        display: block;
        position: absolute;
        top: unset;
        bottom: -20vh;
        width: 100%;
        height: 75%;
        animation-name: fadeup;
        animation-duration: 1s;
        --mask: linear-gradient(to top, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 80%, 
        rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    -webkit-mask: var(--mask); 
    mask: var(--mask);
    }

    .move_up {
        bottom: 0vh;
    }
    ::-webkit-scrollbar {
        width: auto; /* Hide scrollbar in WebKit browsers */
    }
    .images{
        width: 20vw;
    }
    .title {
        font-size: 25vw;
    }
    .sub_title {
        font-size: 5vw;
    }
    .texts {
        font-size: 3vw;
    }
    .buttons {
        font-size: 8vw;
    }
        .buttons:hover {
            font-size: 10vw;
            color: tomato;
        }

    .video {
        right: -40%;
    
    }
    #logo {

        padding-right: 5vw;
        padding-top: 5vw;
        width: 25vw;
    }
    .logos {
        width: 25vw;

    }
}