body {
  height: 100vh;
  width: 100vw;
}

.space-container {
  position: relative;
  height: 100%;
  width: 100%;
  background: #1a1a1a;
  overflow: hidden;
}

.space-container::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  box-shadow:
  10vw 20vh white,
  30vw 40vh white,
  50vw 10vh white,
  70vw 60vh white,
  90vw 30vh white,
  20vw 70vh white,
  60vw 20vh white,
  80vw 80vh white;
  animation: twinkle 10s ease-in-out infinite;
}

.earth {
  width: 200px;
  height: 200px;
  background: skyblue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow:
  inset 0 0 20px rgba(0, 0, 50, 0.3),
  0 0 20px rgba(100, 180, 255, 0.6),
  0 0 60px rgba(100, 180, 255, 0.2);
}

.moon {
  width: 30px;
  height: 30px;
  background: lightgray;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: -150px 0;
  animation: orbit 8s linear infinite;
}

@keyframes orbit {
  0%{
    transform: translateX(150px) rotate(0deg);
  }
  100%{
    transform: translateX(150px) rotate(360deg);
  }
}

@keyframes twinkle {
  0%{
    opacity: 0.2;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.3;
  }
}

@media (max-width: 400px) {
  .moon {
    transform-origin: -130px 0;
  }

@keyframes orbit {
    0% {
      transform: translateX(130px) rotate(0deg);
    }
    100% {
      transform: translateX(130px) rotate(360deg);
    }
  }
}