/*Animation*/
[class*="meteorite-"] {
  position: absolute;
  display: flex;
  border: solid;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  visibility: hidden;
}
.meteorite-jal {
  animation: meteorite-jal;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}
.meteorite-la {
  animation: meteorite-la;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 4s;
}
.meteorite-abb {
  animation: meteorite-abb;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 6s;
}
.meteorite-k {
  animation: meteorite-k;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 8s;
}
.meteorite-ma {
  animation: meteorite-ma;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 10s;
}
.meteorite-pa {
  animation: meteorite-pa;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 11s;
}
[class*="meteorite"] div {
  margin: auto;
}
/*Animation Rocket*/
[class*="rocket-"] {
  position: absolute;
  visibility: hidden;
}
[class*="rocket-"] i {
  transform: scale(2) rotate(-45deg);
}
.rocket-1 {
  animation: rocket-1;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}
.rocket-2 {
  animation: rocket-2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 5s;
}
.rocket-3 {
  animation: rocket-3;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 9s;
}
@keyframes meteorite-jal {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 0%;
    left: 10%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 30%;
  }
}
@keyframes meteorite-la {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 20%;
    left: 0%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 50%;
  }
}
@keyframes meteorite-abb {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 0%;
    left: 50%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 60%;
  }
}
@keyframes meteorite-k {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 50%;
    left: 0%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 20%;
  }
}
@keyframes meteorite-ma {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 0%;
    left: 30%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 40%;
  }
}
@keyframes meteorite-pa {
  0% {
    color: red;
    transform: rotate(0deg);
    top: 0%;
    left: 70%;
    visibility: visible;
  }
  10% {
    color: blue;
  }
  20% {
    color: red;
  }
  30% {
    color: blue;
  }
  40% {
    color: red;
  }
  50% {
    color: blue;
  }
  60% {
    color: red;
  }
  70% {
    color: blue;
  }
  80% {
    color: red;
  }
  90% {
    color: blue;
  }
  100% {
    color: transparent;
    transform: rotate(3600deg);
    top: 1100%;
    left: 80%;
  }
}
/*Rocket*/
@keyframes rocket-nav {
  0% {
    position: absolute;
    top: 500%;
    left: 0%;
  }
  100% {
    top: -500%;
    left: 115%;
  }
}
@keyframes rocket-1 {
  0% {
    visibility: visible;
    top: 1100%;
    left: 20%;
  }
  100% {
    top: -100%;
    left: 20%;
  }
}
@keyframes rocket-2 {
  0% {
    visibility: visible;
    top: 1100%;
    left: 40%;
  }
  100% {
    top: -100%;
    left: 40%;
  }
}
@keyframes rocket-3 {
  0% {
    visibility: visible;
    top: 1100%;
    left: 60%;
  }
  100% {
    top: -100%;
    left: 60%;
  }
}