* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  background-color: #394276;
  height: 31.25em;
  width: 31.25em;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.cloud {
  background-color: #f5f5f5;
  height: 6.25em;
  width: 20.62em;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 18.75em;
  border-radius: 6.25em;
}
.cloud:before {
  position: absolute;
  content: '';
  height: 10.62em;
  width: 10.62em;
  background-color: #f5f5f5;
  border-radius: 50%;
  bottom: 1.87em;
  left: 2.5em;
}
.cloud:after {
  position: absolute;
  content: '';
  height: 6.25em;
  width: 6.25em;
  background-color: #f5f5f5;
  border-radius: 50%;
  bottom: 3.75em;
  right: 3.12em;
  z-index: -1;
}
.moon {
  background-color: #787470;
  height: 9.37em;
  width: 9.37em;
  border-radius: 50%;
  position: absolute;
  right: 5em;
  top: 11.25em;
  overflow: hidden;
  z-index: -2;
  animation: spin-moon 5s infinite linear;
}
@keyframes spin-moon {
  100% {
    transform: rotate(360deg);
  }
}
.moon:before {
  position: absolute;
  content: '';
  height: 1.87em;
  width: 1.87em;
  background-color: #565350;
  border-radius: 50%;
  top: 1.87em;
  box-shadow: 5.62em 3.12em 0 0.75em #565350, 2.18em 4.68em 0 -0.3em #565350,
    6.25em -1.87em 0 -0.18em #565350, 3.43em 0.3em 0 -0.5em #565350;
}
.blush {
  height: 2.62em;
  width: 2.62em;
  background-color: #c9c9c9;
  border-radius: 50%;
  position: absolute;
  left: 5em;
  box-shadow: 6.87em 0 #c9c9c9;
}
.eye-l,
.eye-r {
  position: absolute;
  height: 1.25em;
  width: 2.12em;
  background-color: #363636;
  border-radius: 0 0 0.93em 0.93em;
}
.eye-l {
  left: 6.87em;
}
.eye-l:before,
.eye-r:before {
  position: absolute;
  content: '';
  background-color: #f5f5f5;
  height: 0.81em;
  width: 1.25em;
  border-radius: 0 0 0.93em 0.93em;
  left: 0.43em;
}
.eye-r {
  left: 11.25em;
}
.mouth {
  height: 1.25em;
  width: 1.25em;
  background-color: #363636;
  border-radius: 50%;
  position: absolute;
  left: 9.68em;
  top: 1.56em;
  animation: snoore 3s infinite;
}
@keyframes snoore {
  50% {
    transform: scale(1.3);
  }
}
.star {
  position: absolute;
  height: 0.31em;
  width: 0.31em;
  background-color: #f0d815;
  border-radius: 50%;
}
.star:before {
  position: absolute;
  content: '';
  background-color: rgba(240, 216, 21, 0.4);
  height: 0.31em;
  width: 0.31em;
  border-radius: 50%;
  animation: twinkle 2s infinite;
}
@keyframes twinkle {
  50% {
    transform: scale(2);
  }
}
.star-1 {
  left: 4.37em;
  top: 6.25em;
}
.star-2 {
  left: 13.12em;
  top: 28.12em;
}
.star-3 {
  left: 8.75em;
  top: 10em;
}
.star-4 {
  left: 16.25em;
  top: 1.87em;
}
.star-5 {
  left: 26.25em;
  top: 21.87em;
}
.star-6 {
  left: 28.75em;
  top: 11.87em;
}
@media screen and (max-width: 500px) {
  .container {
    font-size: 12px;
  }
}