body {
  overflow : hidden;
  background-color : black;
}

#cover {
  position : absolute;
  left : 0;
  height : 100vh;
  width : 100vw;
  background-color : black;
  z-index : 2;
  transform : translateY(-100%);
  animation : coverLoad 3.2s;
}

@keyframes coverLoad {
  0% {
    transform : translateY(0);
  }
  70% {
    transform : translateY(0);
  }
}

#homeText {
  position: fixed;
  top : 50%;
  left : 50%;
  right : 0;
  transform :translateY(-60%) translateX(40%);
  color: white;
  width: 31%;
  height : fit-content;
  margin-right : 5rem;
  animation : textLoad 5s;
  opacity : 1;
  z-index : 3;
}

#top-bar {
  animation : navLoad 5s;
}

@keyframes navLoad {
  0% {
    transform : translateY(-150%);
  }
  90% {
    transform : translateY(-150%);
  }

}

@keyframes textLoad {
  0% {
    left : 50%;
    transform : translateX(-100%) translateY(-45%);
    opacity : 0;
    pointer-events : none;
  }
  10% {
    transform : translateX(-55%) translateY(-45%);
    opacity : 1;
  }
  25% {
    transform : translateX(-62%) translateY(-45%);
  }
  35% {
    transform : translateX(-60%) translateY(-45%);
  }
  50% {
    transform : translateX(-60%) translateY(-45%);
  }
  100% {
    pointer-events : none;
  }
}


#homeText:hover {
  transition-duration : 500ms;
}

h1 {
  position : relative;
  font-size: 4.5em;
  top : 2rem;
  animation : titleLoad 5s;
  display : flex;
  align-items : center;
}

@keyframes titleLoad {
  0% {
    font-size : 10em;
  }
  50% {
    font-size : 10em;
  }
}

#subText {
  animation : sub 8s;
}

@keyframes sub {
  0% {
    opacity : 0;
    transform : translateX(-50%);
  }
  55% {
    opacity : 0;
    transform : translateX(-50%);
  }
  65% {
    transform : translateX(2%);
  }
  70% {
    transform : translateX(0);
  }
}

p {
  position: relative;
  top: 0rem;
  font-size: 1.5em;
  margin : 0 0 2rem;
}

h1 div {
  padding : 0;
  margin : 0;
  height : fit-content;
  width : fit-content;
  display : flex;
  justify-content : center;
  align-items : center;
  margin-right: 15px;
  animation : spin2 1.7s;
  border-radius : 50%;
  background-color : rgb(20, 20, 20);
}

h1 div:hover {
  animation : spin2 1s infinite;
}

@keyframes spin2 {
  0% {
    transform : rotate(0deg);
  }
  100% {
    transform : rotate(360deg);
  }
}

#bigLogo {
  position: relative;
  height: 60px;
  animation : logoLoad 5s;
}

@keyframes logoLoad {
  0% {
    height : 130px;
    pointer-events : none;

  }
  50% {
    height : 130px;
    pointer-events : none;
  }
  100% {
    pointer-events : none;
  }
}

#runner {
  position : absolute;
  top : 20%;
  left : 6%;
  height : 35px;
  display : none;
}

#buttonAlign {
  display: flex;
  justify-content: center;
}

#join {
  position: relative;
  top: 0;
  padding: 25px 80px 25px 80px;
  background : linear-gradient(to right, rgb(224, 228, 0), rgb(214, 111, 0), rgb(223, 140, 16), rgb(224, 228, 0) 95%);
  border-radius : 40px;
  border : solid;
  border-width : 4px;
  border-color : rgb(243, 255, 178);
  color : black;
  font-weight : bolder;
  box-shadow : 0px 3px 8px rgb(181, 201, 2);
  cursor : pointer;
  transition : all 0.5s ease-in-out;
  background-size: 200% 100%;
}

#join:hover {
  background-position : 100% 0;
}

#join p {
  padding : 0;
  margin : 0;
  height : fit-content;
  width : fit-content;
  font-weight : 600;
  color : rgb(72, 29, 0);
}

#join:hover p {
  animation : btn 0.7s;
}

@keyframes btn {
  0% {
    transform : translateY(0)
  }
  33% {
    color : red;
  }
  40% {
    transform : translateY(-100%);
    opacity : 0;
    color : red;
  }
  45% {
    transform : translateY(100%);
    opacity : 0;
  }
}

#fade {
  position : fixed;
  background : linear-gradient(0deg, transparent, transparent 85%, black);
  padding-left : 100%;
  padding-bottom : 100%;
  top : 0;
  left : 0;
  z-index : 1;
  pointer-events : none;
}

#sidefade {
  position : fixed;
  background : linear-gradient(90deg,transparent, transparent 65%, black);
  padding-left : 99.5%;
  padding-bottom : 100%;
  height : 100%;
}

#fade2 {
  position : fixed;
  background : linear-gradient(0deg, transparent, transparent 94%, black);
  padding-left : 100%;
  padding-bottom : 100%;
  top : 8%;
  left : 0;
  z-index : 1;
  pointer-events : none;
}

video {
  position: fixed;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


@media (max-width : 1100px) {
  #homeText {
    width : 34%;
  }
}

@media (max-width : 990px) {
  #homeText {
    width : 40%;
  }
  h1 {
    width : 150%;
    margin-left : -5rem;
  }
}


@media (max-width : 600px) {
  :root {
    font-size : 12px;
  }


  * {
    animation : none !important;
  }

  header {
    background-color : rgb(20, 20, 20);
    padding : 1rem 0 1rem;
  }

  .logo {
    font-size : 3rem !important;
  }

  .logo img {
    height : 3rem !important;
  }

  #homeText {
    top : 40%;
    width : 80%;
    height : fit-content !important;
    left : 50%;
    transform : translateX(-50%) translateY(-50%);
    background-color : rgba(0, 0, 0, 0.3);
    padding : 1rem !important;
  }
  #homeText h1 {
    margin  : 0 0 2rem 0;

  }

}