@font-face {
    font-family: Font1;
    src: url(kesslersuperdisplayweb-regular.ttf);
}

@font-face {
    font-family: Font2;
    src: url(FraktionMono-Regular.ttf);
}

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
}

#main{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100%;
}

.center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 120%;
}

.right{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 100%;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    padding: 0.5vw 1.2vw;
    border: 1px solid #333;
    border-radius: 50px;
    font-size: 0.5vw;
    font-family: Font2;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}

.t-center{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 50%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}

.b-center{
    width: 100%;
    height: 50%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}

.center h1{
    line-height: 15vh;
    font-size: 10vw;
    font-weight: 400;
    font-family: Font1;
    text-align: center;
}

.c-center-one{
    position: relative;
    transform-origin: center;
    width: 100%;
    height: 0vh;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.c-center-two{
    width: 100%;
    height: 0vh;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}


.img-all{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
    background-size: cover;
    background-position: center;
}

.img-one{
    bottom: 60%;
    right: 50%;
    width: 25vw;
    height: 25vh;
    filter: blur(10px);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}

.img-two{
    top: 55%;
    left: 50%;
    width: 15vw;
    height: 17vh;
    filter: blur(5px);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}


.img-three{
    top: 50%;
    left: 37%;
    width: 10vw;
    height: 12vh;
    background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
    filter: blur(20px);
    transition: all cubic-bezier(0.19, 1, 0.22, 1)2s;
}


.img-four{
    top: 40%;
    left: 55%;
    width: 7vw;
    height: 7vh;
    background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
    filter: blur(20px);
}

#one{
    background-image: url(https://images.unsplash.com/photo-1682687218608-5e2522b04673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2575&q=80);
}

#two{
    background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80);
}

#three{
    background-image: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1353&q=80);
}

#four{
    background-image: url(https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80);
}

#five{
    background-image: url(https://images.unsplash.com/photo-1682709846996-f3c895743d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}

#six{
    background-image: url(https://images.unsplash.com/photo-1682794496831-81a52c8e9136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}

#seven{
    background-image: url(https://images.unsplash.com/photo-1682314803906-d2078f031d82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80);
}

#eight{
    background-image: url(https://images.unsplash.com/photo-1682200736161-77f04daf9a59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80);
}