Весь проект в один миг уходит куда-то

.tok {
    position: relative;
    font-family: 'Wade Bold';
    margin-left: 850px;
    margin-top: 100px;
    color: rgba(0, 0, 0, 0);
    animation-name: t2;
    animation-duration: 1s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
    font-size: 50px;
}
.tok{z-index: 10;}
.why {
    position: relative;
    font-family: 'Gg';
    margin-left: 760px;
    margin-top: 20px;
    color: rgba(0, 0, 0, 0);
    animation-name: t2;
    animation-duration: 1s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
    font-size: 25px;
}
.why{z-index: 10;}
.mains {
    position: relative;
    font-family: 'Gg';
    font-size: 20px;
    animation-name: t1;
    animation-duration: 1s;
    animation-delay: 5s;
    color: rgba(0, 0, 0, 0);
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;
    display:inline;
    
    
}
.mains {z-index: 4;}


.nav {
    margin-left: 750px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left li {
    display: inline-block;
    list-style: none;
    padding: 10px 20px;
}

@keyframes t1{
    from{
        color: rgba(0, 0, 0, 0);
    }
    to{
        color: rgb(0, 0, 0);
        text-decoration: none;
    }
}
@keyframes t2{
    from{
        color: rgba(0, 0, 0, 0);
    }
    to{
        color: rgb(0, 0, 0);
    }
}

.mains1 {
    position: relative;  
    font-family: 'Gg';
    font-size: 20px;
    animation-name: t1;
    animation-duration: 1s;
    animation-delay: 5s;
    color: rgba(0, 0, 0, 0);
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;

}
.mains1 {z-index: 4;}

.mains2 {
    position: relative;
    font-family: 'Gg';
    font-size: 20px;
    animation-name: t1;
    animation-duration: 1s;
    animation-delay: 5s;
    color: rgba(0, 0, 0, 0);
    animation-fill-mode: forwards;
    transition-timing-function: ease-out;

}
.mains2 {z-index: 4;}


/* --------------- */

* {
    margin-left: 850px;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0;
  }

body {
    background-color: #363636;
    overflow-y:scroll;
    overflow-x:scroll;
}

.circles {
    position: relative;
    top: 10px; left: 850px;
    width: 125px;
    height: 120px;
    background: #7738ff;
    border-radius: 60px;
    transition-timing-function: ease;
    animation-name: cf, cs, cps,cpps;
    animation-duration: 1.7s;
    animation-delay: 0s, 3s, 4s, 7s;
    animation-fill-mode: forwards;
    

}

.text {
    position: relative;
    top: 230px; left: 850px;
    animation-name: text1, text3;
    transition-timing-function: ease-out;
    animation-delay: 1.7s, 4s;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    color: rgba(0, 0, 0, 0);
    font-family: 'Wade Bold';
}
.text1 {
    position: relative;
    top: 285px; left: 840px;
    animation-name: text2, text4;
    transition-timing-function: ease-out;
    animation-delay: 2.5s, 4s;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    color: rgba(0, 0, 0, 0);
    font-family: 'Gg';
}

@keyframes cf{
    from{
        transform: translate(50px, 100px);
    } 
    to{
        transform: translate(50px, 350px);
    }
    to{
        width: 1000px;
        position: relative;
        top: 10px; left: 400px;
        
    }
    
}
@keyframes cs {
    from{

    }
    to{
        position: relative;
        left: -55px;
        width: 2000px;
        border-radius: 0px;
    }
}
@keyframes cps {
    to{
        transform: scale(4, 6);
    }
}
@keyframes text1{
    from{
        color: rgba(0, 0, 0, 0);
    }
    to{
        color: rgba(0, 0, 0, 0.5);
    }
}
@keyframes text3{
    from{
    }
    to{
        color: rgba(0, 0, 0, 0);
    }
}
@keyframes text2{
    from{
        color: rgba(0, 0, 0, 0);
    }
    to{
        color: rgba(0, 0, 0, 0.5);
    }
}
@keyframes text4{
    to{
        color: rgba(0, 0, 0, 0);
    }
    
}
@keyframes cpps{
    to{
        transform: scaleY(20px);
        margin-top: -350px;
    }
}

@font-face {
    font-family: 'Wade Bold'; 
    src: url(fonts/UltramonoWide-Black.ttf); 
}
@font-face {
    font-family: 'Wade'; 
    src: url(fonts/UltramonoWide-Bold.ttf); 
}
@font-face {
    font-family: 'Mon';
    src: url(fonts/Montserrat-Bold.ttf);
}

@font-face {
    font-family: 'Tt';
    src: url(fonts/0ca58-ac-boucle.ttf);
}
@font-face {
    font-family: 'Mt';
    src: url(fonts/titilliumwebrusbydaymarius_bd.ttf);
}
@font-face {
    font-family: 'Gg';
    src: url(fonts/MonospaceBold.ttf);
}

<div class="nav">
    <ul class="left">
        <li><a class="mains" href="#">Главная</a></li>
        <li><a class="mains1" href="#">Купить</a></li>
        <li><a class="mains2" href="#">Информация</a></li>
    </ul>
</div>
    <h1 class="tok">LYCA</h1>
    <h4 class="why">Создан, чтобы окупиться</h4>
    <div class="circles"></div>
    <H3 class="text1">На базе The Open Network</H3>
    <H2 class="text">LYCA TOKEN</H2>