body{
    margin:0;
    height:200vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: Cambria;
    overflow-x: hidden;
}
.container{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    height: 200vh;
    grid-template-areas: 
    "main main main main"
    "main main main main"
    "main main main main"
    "main main main main"
    "main main main main"
    ;
}
.header{
  background-color: #000;
  height: 30vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10vw;
}
.logo img{
    width:20vw;
    animation: logo-rotate 5s 5s infinite;
}
.logo{
    width:10vw;
}
a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    transition:all 1s;
}
nav ul{
    display: flex;
    align-items: center;
    gap: 2vw;
}
nav li{
    list-style: none;
    transition:all 1s;
}
nav li:hover{
    transform: scale(1.2);
}
a:hover{
    color: #f00;
    text-shadow: rgb(124, 124, 124) 3px 9px 3px;
    transform: scale(1.5);
}
@media screen and (max-width:600px){
    nav ul{
        flex-direction: column;
        font-size: 12px;
    }
    .header{
        gap:0vw;
    }
    .logo{
        width: 25vw;
    }
    .logo img{
        width: 130%;
    }
}
.main{
    grid-area: main;
    background-color: rgb(0, 0, 0);
}
.footer{
    display: flex;
    height: 40vh;
    background-color: #000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4vh;
    position: relative;
}
.icons{
    display: flex;
    gap: 2vw;
}
.logo-gif{
    align-self: end;
    position: absolute;
}
.logo-gif img{
    width:10vw;
    filter: drop-shadow(-2px 4px 3px rgb(74, 74, 74));
}
h1{
    transition: 1s;
}
.home-vid{
    transform: translateY(100vh);
    animation: scale 1s ease-in-out forwards;
}

/* Animations Section */
@keyframes logo-rotate{
    from{transform: rotateY(0);}
    to{transform: rotateY(360deg)}
}
@keyframes slideinR{
    0%{transform: translateX(-100vw);}
    98%{transform: translateX(0.5vw);}
    100%{transform: translateX(0);}
}
@keyframes slideinL{
    0%{transform: translateX(100vw);}
    98%{transform: translateX(-1vw);}
    100%{transform: translateX(0);}
}
@keyframes slideUp{
    from{transform: translateY(100vh);}
    to{transform: translateY(0);}
}
@keyframes slideDown{
    from{transform: translateY(-100vh);}
    to{transform: translateY(0);}
}
@keyframes rotate{
    from{transform: rotate(0);}
    to{transform: rotate(360deg);}
}
@keyframes scale{
    from{transform: scale(0.5)}
    to{transform:scale(1)}
}
@keyframes button-shadow{
    from{box-shadow: none;}
    to{box-shadow: inset 0 0 0 2em #CE1212;}
}