@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");

body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(
      rgba(0, 168, 247, 0.5),
      rgba(3, 15, 189, 0.897)
    ),
    url("images/nightsky.png");
  background-size: cover;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
  width: 100%;
  transition: all 1s;
}
.rocketpreloader {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: skycolor, end, fadetoblack, make_visible;
  animation-duration: 15s, 1s, 2s, 1s, 1s;
  animation-delay: 0s, 13s, 15s, 16s;
  animation-timing-function: ease, ease, ease, ease;
  animation-iteration-count: 1, 1, 1, 1;
  z-index: 9;
  background-size: cover;
}

.rocketpreloader h1 {
  opacity: 100%;
  position: absolute;
  top: 10%;
  animation: namesize 5s ease-in-out;
  animation-delay: 6s;
  font-size: 0px;
}
.cloud1 {
  height: 30%;
  animation-name: fly, cloudsize, cloudfall, end;
  animation-duration: 0s, 4s, 2s;
  animation-delay: 1s, 4s, 12s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 3, 1, infinite;
  animation-direction: normal;
  position: relative;
  animation-fill-mode: forwards;
  top: 15%;
  right: 80px;
}
.cloud2 {
  height: 345px;
  top: 5%;
  right: 40;
  position: relative;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  -webkit-animation-duration: 0s, 5s, 2s, 1s;
  -moz-animation-duration: 0s, 5s, 2s, 1s;
  -o-animation-duration: 0s, 5s, 2s, 1s;
  animation-duration: 0s, 5s, 2s, 1s;
  -webkit-animation-delay: 0s, 3s, 4s, 12s;
  -moz-animation-delay: 0s, 3s, 4s, 12s;
  -o-animation-delay: 0s, 3s, 4s, 12s;
  animation-delay: 0s, 3s, 4s, 12s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 1, 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cloud6 {
  height: 275px;
  top: 15%;
  left: 20px;
  
  position: relative;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  -webkit-animation-duration: 1s, 5s, 4s;
  -moz-animation-duration: 1s, 5s, 4s;
  -o-animation-duration: 1s, 5s, 4s;
  animation-duration: 1s, 5s, 4s;
  -webkit-animation-delay: 0s, 1s;
  -moz-animation-delay: 0s, 1s;
  -o-animation-delay: 0s, 1s;
  animation-delay: 0s, 1s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 1, 1, infinite;
  animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.cloud5 {
  height: 400px;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  animation-duration: 0s, 5s, 3s, 1s;
  animation-delay: 0s, 4s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 1, 1, 25, 1;
  animation-direction: normal;
  position: relative;
  animation-fill-mode: forwards;
  top: 25%;
  right: 30;
  
}
.cloud3 {
  height: 430px;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  animation-duration: 0s, 1s, 5s;
  animation-delay: 0s, 3s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 1, 1, 25, end;
  animation-direction: normal;
  position: relative;
  animation-fill-mode: forwards;
  top: 0;
  right: 50;
  z-index: -1;
  
}

.cloud4 {
  height: 40%;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  animation-duration: 0s, 1s, 2s;
  animation-delay: 0s, 7s;
  animation-timing-function: ease, ease;
  animation-iteration-count: 1, 1, infinite;
  animation-direction: normal;
  position: relative;
  animation-fill-mode: forwards;
  top: 25%;
  left: 50;
}

#rocket {
  height: 80%;
  -webkit-animation: fly, cloudsize, cloudfall, end;
  -moz-animation: fly, cloudsize, cloudfall, end;
  -o-animation: fly, cloudsize, cloudfall, end;
  animation: fly, cloudsize, cloudfall, end;
  animation-name: rotate, fly, rocketsize, moveUp, rocketsizebig, end;
  animation-duration: 1s, 3s, 2s, 0.5s, 2s, 2s;
  animation-delay: 0s, 1s, 5s, 8s, 12s, 13s;
  animation-timing-function: ease, ease, ease;
  animation-iteration-count: 1, 1, 1, 45;
  animation-direction: alternate;
  position: absolute;
  animation-fill-mode: forwards;
}

.fire {
  height: 10px;
  position: relative;
  top: 200px;
  z-index: 999;
  -webkit-animation: makevisible, moveUp, end;
  -moz-animation: makevisible, moveUp, end;
  -o-animation: makevisible, moveUp, end;
  animation: makevisible, moveUp, end;
  -webkit-animation-duration: 1s, 1s, 1s;
  -moz-animation-duration: 1s, 1s, 1s;
  -o-animation-duration: 1s, 1s, 1s;
  animation-duration: 1s, 1s, 1s;
  -webkit-animation-delay: 8s, 9s, 10s;
  -moz-animation-delay: 8s, 9s, 10s;
  -o-animation-delay: 1s, 1s, 1s;
  animation-delay: 8s, 9s, 10s;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: 9, 4, 1;
  -moz-animation-iteration-count: 9, 4, 1;
  -o-animation-iteration-count: 9, 4, 1;
  animation-iteration-count: 9, 4, 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animattion-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/*rocket preloader animations*/

@keyframes fadetoblack {
  from {
    background-color: #4f3b9c;
  }
  to {
    background-color: rgb(1, 3, 4);
  }
}

/* @-webkit-keyframes skycolor
{
  from { background-color:rgb(31, 106, 206);}
    to { background:linear-gradient(rgb(31, 106, 206), ) rgb(0, 59, 5);}
} */
@-moz-keyframes skycolor {
  from {
    background-color: rgb(31, 106, 206);
  }
  to {
    background-color: rgb(0, 0, 59);
  }
}
@-o-keyframes skycolor {
  from {
    background-color: rgb(31, 106, 206);
  }
  to {
    background-color: rgb(0, 0, 59);
  }
}
@keyframes skycolor {
  from {
    background: linear-gradient(rgba(8, 96, 212, 0.911) 60%, rgb(31, 151, 206)),
      url(images/nightsky.png);
    background-repeat: none;
    background-size: cover;
  }
  to {
    background: linear-gradient(
        rgba(7, 28, 119, 0.575),
        rgba(3, 90, 172, 0.836)
      ),
      url(images/nightsky.png);
    background-repeat: none;
    background-size: cover;
  }
}


@keyframes fly {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-600px);
  }
}
@-webkit-keyframes fly {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-600px);
  }
}
@-moz-keyframes fly {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-600px);
  }
}
@-o-keyframes fly {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-600px);
  }
}

@keyframes rocketsizebig {
  from {
    height: 200px;
  }
  to {
    transform: translateY(2000px);

    height: 2100%;
    scale:1.5;

  }
}

@keyframes rocketsize {
  from {
    height: 500px;
  }
  to {
    height: 200px;
  }
}
@keyframes cloudsize {
  from {
    height: 75%;
  }
  to {
    height: 15%;
  }
}
@keyframes cloudfall {
  from {
    transform: translateY(-800%);
  }
  to {
    transform: translateY(800%);
  }
}
@keyframes makevisible {
  from {
    height: 0%;
   
  }
  to {
    height: 50%;
  }
}
/* @keyframes make_invisible {
  from {
    height: 100%;
    width: 100%;
  }
  to {
    height:75%;
    width: 50%;
  }
} */
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes end {
  from {
    visibility: visible;
  }
  to {
    visibility: hidden;
  }
}

#refresh_button {
  position: absolute;
  margin: 0;
  background-color: rgb(55, 0, 128);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 10px 10px;
  font-family: "Bangers";
  font-size: 40px;
  z-index: 0;

  animation: on_top 1s ease infinite;
  animation-delay: 16s;
}
#refresh_button:hover {
  font-size: 22px;
  color: white;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#refresh-container {
  position: absolute;
  background-color: white;
  width: 350px;
  box-sizing: border-box;
  height: 350px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 20px;
  -webkit-animation: on_top 1s ease infinite;
  -moz-animation: on_top 1s ease infinite;
  -o-animation: on_top 1s ease infinite;
  animation: on_top 1s ease infinite;
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
  border: 5px solid black;
  box-shadow: 0px 10px 2.5px rgba(0, 0, 0, 0.788);
}

#refresh_page_rocket {
  position: absolute;
  width: 400px;
  -webkit-animation: moveUp 1s ease alternate infinite;
  -moz-animation: moveUp 1s ease alternate infinite;
  -o-animation: moveUp 1s ease alternate infinite;
  animation: moveUp 1s ease alternate infinite;
}

@keyframes on_top {
  from {
    z-index: 0;
  }
  to {
    z-index: 999;
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(-50x);
  }
}