html, body {
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#stars {
  overflow: hidden;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  opacity: var(--brightness);
  animation: twinkle var(--twinkle-duration) ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: calc(var(--brightness) * 0.4); }
  100% { opacity: calc(var(--brightness)); }
}

.solar-system {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.sun {
  width: 150px;
  height: 150px;
  background-color: yellow;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 20px yellow;
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--radius, 400px) * 2);
  height: calc(var(--radius, 400px) * 2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--offset, 0deg));
  animation: spin linear infinite;
  animation-duration: var(--speed, 240s);
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(var(--offset, 0deg)); }
  to { transform: translate(-50%, -50%) rotate(calc(360deg + var(--offset, 0deg))); }
}

.planet {
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
}

.mercury .orbit {
  --radius: 120px;
  --speed: 200s;
  --offset: 0deg;
}

.mercury .planet {
  --size: 10px;
  background: radial-gradient(circle at 30% 30%, gray, darkgray);
  box-shadow: 0 0 3px gray;
}

.venus .orbit {
  --radius: 140px;
  --speed: 245s;
  --offset: 180deg;
}

.venus .planet {
  --size: 15px;
  background: radial-gradient(circle at 30% 30%, orange, brown);
  box-shadow: 0 0 5px #101010;
}

.earth .orbit {
  --radius: 180px;
  --speed: 280s;
  --offset: 110deg;
}

.earth .planet {
  --size: 30px;
  background: radial-gradient(circle at 30% 30%, lightblue, blue);
  box-shadow: 0 0 15px #001030;
}

.mars .orbit {
  --radius: 220px;
  --speed: 300s;
  --offset: 230deg;
}

.mars .planet {
  --size: 20px;
  background: radial-gradient(circle at 30% 30%, pink, darkred);
  box-shadow: 0 0 15px #500000;
}

.jupiter .orbit {
  --radius: 300px;
  --speed: 360s;
  --offset: 40deg;
}

.jupiter .planet {
  --size: 60px;
  background: radial-gradient(circle at 30% 30%, #a56000, #501000);
  box-shadow: 0 0 20px #301000;
}

.saturn .orbit {
  --radius: 400px;
  --speed: 420s;
  --offset: 220deg;
}

.saturn .planet {
  --size: 60px;
  background: radial-gradient(circle at 30% 30%, #803000, #800200);
  box-shadow: 0 0 20px #400000;
}

.uranus .orbit {
  --radius: 480px;
  --speed: 480s;
  --offset: 120deg;
}

.uranus .planet {
  --size: 60px;
  background: radial-gradient(circle at 30% 30%, #003030, #000101);
  box-shadow: 0 0 25px #003010;
}

.neptune .orbit {
  --radius: 550px;
  --speed: 540s;
  --offset: 310deg;
}

.neptune .planet {
  --size: 60px;
  background: radial-gradient(circle at 30% 30%, darkblue, #000001);
  box-shadow: 0 0 20px #000050;
}