CSS quests

/* Converted from SASS */

.sky {
  background: #020961;
  background: linear-gradient(to bottom, #020961 0%, #56037c 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 750px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.constellation {
  position: absolute;
}

.constellation--big-dipper {
  top: 50px;
  left: 20px;
  width: 207px;
  height: 182px;
}

.constellation--little-dipper {
  top: 80px;
  right: 20px;
  width: 171px;
  height: 84px;
}

.constellation--cassiopeia {
  bottom: 40px;
  right: 140px;
  width: 94px;
  height: 55px;
}

.constellation__star {
  border-radius: 50%;
  background: #ffffff;
  width: 6px;
  height: 6px;
  position: absolute;
  animation: twinkle 2s linear infinite alternate;
  animation-fill-mode: both;
}

.constellation__star:nth-child(1) {
  animation-delay: 100ms;
}

.constellation__star:nth-child(2) {
  animation-delay: 200ms;
}

.constellation__star:nth-child(3) {
  animation-delay: 300ms;
}

.constellation__star:nth-child(4) {
  animation-delay: 400ms;
}

.constellation__star:nth-child(5) {
  animation-delay: 500ms;
}

.constellation__star:nth-child(6) {
  animation-delay: 600ms;
}

.constellation__star:nth-child(7) {
  animation-delay: 700ms;
}

.constellation__star:nth-child(8) {
  animation-delay: 800ms;
}

.constellation__star:nth-child(9) {
  animation-delay: 900ms;
}

.constellation__star:nth-child(10) {
  animation-delay: 1000ms;
}

.constellation--big-dipper .constellation__star:nth-child(1) {
  top: 13%;
  left: 31%;
}

.constellation--big-dipper .constellation__star:nth-child(2) {
  top: 92%;
  left: 80%;
}

.constellation--big-dipper .constellation__star:nth-child(3) {
  top: 52%;
  left: 56%;
}

.constellation--big-dipper .constellation__star:nth-child(4) {
  top: 0;
  left: 0;
}

.constellation--big-dipper .constellation__star:nth-child(5) {
  top: 74%;
  left: 52%;
}

.constellation--big-dipper .constellation__star:nth-child(6) {
  top: 33%;
  left: 42%;
}

.constellation--big-dipper .constellation__star:nth-child(7) {
  top: 73%;
  left: 94%;
}

.constellation--little-dipper .constellation__star:nth-child(1) {
  top: 30%;
  left: 30%;
}

.constellation--little-dipper .constellation__star:nth-child(2) {
  top: 19%;
  left: 0;
}

.constellation--little-dipper .constellation__star:nth-child(3) {
  top: 94%;
  left: 93%;
}

.constellation--little-dipper .constellation__star:nth-child(4) {
  top: 47%;
  left: 7%;
}

.constellation--little-dipper .constellation__star:nth-child(5) {
  top: 0;
  left: 26%;
}

.constellation--little-dipper .constellation__star:nth-child(6) {
  top: 61%;
  left: 78%;
}

.constellation--little-dipper .constellation__star:nth-child(7) {
  top: 33%;
  left: 57%;
}

.constellation--cassiopeia .constellation__star:nth-child(1) {
  top: 0;
  left: 0;
}

.constellation--cassiopeia .constellation__star:nth-child(2) {
  top: 92%;
  left: 69%;
}

.constellation--cassiopeia .constellation__star:nth-child(3) {
  top: 56%;
  left: 93%;
}

.constellation--cassiopeia .constellation__star:nth-child(4) {
  top: 44%;
  left: 31%;
}

.constellation--cassiopeia .constellation__star:nth-child(5) {
  top: 39%;
  left: 57%;
}

@keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.rocket__body:before, .rocket__window:before, .rocket__fin--right:before, .rocket__exhaust:before {
  content: "";
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0.3;
  width: 50%;
  height: 100%;
  right: 0;
}

.rocket {
  position: absolute;
  width: 150px;
  height: 350px;
  animation: fly 4s linear infinite;
  animation-fill-mode: both;
}

.rocket > div {
  position: absolute;
  overflow: hidden;
  perspective: 1px;
  /* fixes the border-radius & overflow bug for chrome */
}

.rocket__body {
  background-color: #6e6e6e;
  top: 0%;
  left: 25%;
  width: 50%;
  height: 78%;
  border-top-left-radius: 80%;
  border-top-right-radius: 80%;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
}

.rocket__window {
  background-color: #38b8d9;
  top: 20%;
  left: 35%;
  width: 30%;
  padding-bottom: 30%;
  height: 0;
  border-radius: 50%;
}

.rocket__fin {
  background-color: #c53232;
  bottom: 25%;
  width: 25%;
  height: 20%;
}

.rocket__fin--left {
  left: 0;
  border-top-left-radius: 80%;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 20%;
}

.rocket__fin--right {
  right: 0;
  border-top-right-radius: 80%;
  border-bottom-right-radius: 10%;
  border-bottom-left-radius: 20%;
}

.rocket__fin--right:before {
  width: 100%;
}

.rocket__exhaust {
  background-color: #3b3b3b;
  bottom: 20%;
  left: 30%;
  width: 40%;
  height: 2%;
}

.rocket__flame, .rocket__flame:before {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 90%;
  border-bottom-right-radius: 90%;
  animation: burn 0.3s infinite alternate;
  animation-fill-mode: both;
  transform-origin: top center;
}

.rocket__flame {
  background-color: #ff2421;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 20%;
}

.rocket__flame:before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  background: #ffbf4f;
  width: 60%;
  height: 70%;
  animation-delay: 0.1s;
}

@keyframes burn {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fly {
  0% {
    left: 0;
    top: 100%;
    transform: scale(0.4) rotate(43deg);
  }
  100% {
    left: calc(100% - 150px);
    top: -350px;
    transform: scale(1) rotate(23deg);
  }
}