body {
  padding: 25px;
  overflow: hidden;
}

/*background animation*/
html {
  background: linear-gradient(45deg, #121212, #122242);
  background-size: 400% 400%;
  animation: gradient 8s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/*end of background animation*/

/*link stuff*/
.llink {
  color: darkgrey;
  font-size: 32px;
  font-family: 'Orbitron';
}

.llink:hover {
  animation: linkhover .5s ease 0s both;
}

.llink:active {
  color: darkgrey;
}

@keyframes linkhover {
  from {
    color: darkgrey;
  }

  to {
    color: white;
  }
}

.darkgrey {
  color: lightgrey;
}

.orbitron {
  font-family: 'Orbitron';
}

body {
  text-align: center;
}

ul {
  list-style-type: none;
}

#back {
  text-decoration: none;
  color: grey;
}

.link {
  color: lightgrey;
}

.link:hover {
  color: white;
}

a {
  margin-bottom: 10px;
}

/*end of link stuff*/

/*animation section*/
#floatdown {
  position: relative;
  animation: down 1.5s ease-out 0s both;
}

@keyframes down {
  0% {
    top: -250px;
  }

  100% {
    top: 0px;
  }
}

#back {
  position: relative;
  animation: up 2s ease 2.5s both;
}

#up {
  position: relative;
  animation: up 2s ease 2.35s both;
}

#time {
  position: relative;
  animation: up 2s ease 2.4s both;
}


@keyframes up {
  0% {
    bottom: -1450px;
  }

  100% {
    bottom: 0px;
  }
}

#left1 {
  position: relative;
  animation: slideleft 1s ease-out 1.5s both;
}

#left2 {
  position: relative;
  animation: slideleft 1s ease-out 1.8s both;
}

@keyframes slideleft {
  0% {
    right: -1450px;
  }

  100% {
    right: 0px;
  }
}

#right1 {
  position: relative;
  animation: slideright 1s ease-out 1.65s both;
}

#right2 {
  position: relative;
  animation: slideright 1s ease-out 1.95s both;
}

@keyframes slideright {
  0% {
    left: -1450px;
  }

  100% {
    left: 0px;
  }
}

/*animation end*/