*{
    --bg: #7C00FE;
    --el1: #F9E400;
    --el2: #FFAF00;
    --int: #F5004F;
    margin: 0;
    scroll-behavior: smooth;
}

#home{
    height: 100vh;
    width: 100vw;
    background: var(--bg);
}

#logoContainer{
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    animation-name: simmove;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    top: -20%;
}

#companyName{
    width: 100%;
    position: relative;
    top: 60%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 8rem;
    letter-spacing: 2px;
    color: var(--el2);
}

#slogan{
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: x-large;
    text-align: center;
    letter-spacing: 1px;
    color: var(--el2);
}

.sim{
    position: absolute;
}



@keyframes simmove{
    0%, 20%, 70%, 100%{
        transform: rotateY(0deg);
    }

   30%, 40%{
        transform: rotateX(88deg) rotateZ(90deg) scale(0.5);
    }
    
    50%{
        transform: rotateX(88deg) rotateZ(90deg) translateY(-300%) scale(0.1);
    }
    
    51%{
        transform: rotateX(88deg) rotateZ(90deg) translateY(300%) scale(0.1);
    }
}


#hero{
    width: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    background: var(--bg);
}

#hero > #left{
    padding: 5%;
}

#hero > #left > #headline{
    font-size: 3rem;
    color: var(--el2);
}

#hero > #left > #content{
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: var(--el2);
    padding-left: 2%;
    margin-left: 5%;
}

#hero > #left > #join{
    position: relative;
    background: var(--el2);
    margin: 20%;
    font-size: x-large;
    text-decoration: none;
    padding: 5%;
    border-radius: 5px;
    color: var(--int);
    top: 15%;
}

#hero > #right{
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    flex-direction: column;
}

#hero > #right > #people{
    display: flex;
    justify-content: center;
}
#hero > #right > #sim{
    position: absolute;
    scale: 0.4;
    transform: translateX(100%) translateY(-50%);
    animation-name: simrotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes simrotate {
    0%, 100%{
        transform: translateX(100%) translateY(-50%) rotateY(0deg);
    }
    
    20%{
        transform: translateX(100%) translateY(-50%) rotateY(180deg) rotateX(30deg);
    }
}

#towers{
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    background: var(--bg);
    padding-top: 5%;
    padding-bottom: 2%;
    height: 400px;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15%;
}

#towers > #left{
    overflow: hidden;
}

#links{
    position: relative;
    animation-name: chainmove;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    height: 100%;
    width: 100%;
    transform: scaleX(1.5);
}

#links > img{
    width: 150%;
}

@keyframes chainmove {
    0%{
        transform: translateX(-100%) scaleX(1.5);
    }
    
    100%{
        transform: translateX(-58%) scaleX(1.5);
    }
}

#towers > #right{
    padding: 15%;
}

#towers > #right > #headline{
    letter-spacing: 2px;
    font-size: 3rem;
    color: var(--el2);
}

#towers > #right > #content{
    letter-spacing: 1px;
    font-size: 1.4rem;
    color: var(--el2);
    padding-left: 5%;
}


#everywhere{
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 50% 50%;
    background: var(--bg);
    overflow: hidden;
    height: 400px;
}


#everywhere > #left > #headline{
    font-size: 3rem;
    color: var(--el2);
    padding-left: 5%;
}

#everywhere > #left > #content{
    padding-left: 15%;
    font-size: 1.4rem;
    color: var(--el2);
    letter-spacing: 1px;
}



#everywhere > #right > #earth > img{
    transform: translateX(50%);
}

#everywhere > #right> #earth{
    transform-origin: center;
    transform: translateY(60%);
    animation-name: rotateearth;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotateearth {
    0%{
        transform: translateY(60%) rotateZ(0deg);
    }
    
    100%{
        transform: translateY(60%) rotateZ(360deg);
    }
}

#register{
    padding: 15%;
    background: var(--bg);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#register > #left{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#register > #right{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#ques{
    text-align: center;
    font-size: 3rem;
    color: var(--el2);
    letter-spacing: 2px;
}

#joinb{
    text-align: center;
    color: var(--int);
    background: var(--el2);
    font-size: x-large;
    width: 20%;
    height: 50px;
    text-align: center;
    text-decoration: none;
    transform: translateX(200%);
    margin-top: 5%;
}

#seeb{
    text-align: center;
    color: var(--int);
    background: var(--el2);
    font-size: x-large;
    width: 40%;
    height: 50px;
    text-align: center;
    text-decoration: none;
    transform: translateX(80%);
    margin-top: 5%;
}

a:hover{
    background: var(--bg);
    color: var(--el2);
}

footer{
    width: 100vw;
    height: 20vh;
    background: #4d029d;
    color: white;
    font-size: 1.4rem;
}

footer > a{
    color: white;
    letter-spacing: 2px;
    text-decoration: none;
    padding-left: 5%;
}
footer > p{
    color: white;
    letter-spacing: 2px;
    text-decoration: none;
    padding-left: 5%;
}