/* Background = space */
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, #000000 0%, #0d1b2a 100%);
  overflow: hidden;
}

/* Title */
.title {
  position: absolute;
  top: 20px;
  font-family: sans-serif;
  font-size: 24px;
  color: white;
  letter-spacing: 4px;
}

/* Sun in the center */
.sun {
  width: 100px;
  height: 100px;
  background: yellow;
  border-radius: 50%;
  box-shadow: 0 0 40px 15px orange;
  position: absolute;
}

/* Orbit (circle path) */
.orbit {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: spin linear infinite; /* orbit rotation */
}

/* Planet common design */
.planet {
  position: absolute;
  border-radius: 50%;
  top: 50%; /*center vertically */
  left: 100%; /* start at the right edge of orbit */
  transform: translateY(-50%); /* adjust planet to orbit line */
  transition: transform 0.3s ease; /* smooth hover */
}

/* .planet:hover {
  transform: translateY(-50%) scale(1.5);
} */

/* -------- PLANETS -------- */

/* Mercury */
.mercury-orbit {
  width: 150px;
  height: 150px;
  animation-duration: 4s;
}

.mercury {
  width: 15px;
  height: 15px;
  background: gray;
  right: 0;
}

/* Venus */
.venus-orbit {
  width: 200px;
  height: 200px;
  animation-duration: 7s;
}
.venus {
  width: 20px;
  height: 20px;
  background: orange;
  right: 0;
}

/* Earth */
.earth-orbit {
  width: 260px;
  height: 260px;
  animation-duration: 10s;
}
.earth {
  width: 22px;
  height: 22px;
  background: blue;
  right: 0;
}

/* Mars */
.mars-orbit {
  width: 320px;
  height: 320px;
  animation-duration: 15s;
}
.mars {
  width: 18px;
  height: 18px;
  background: red;
  right: 0;
}

/* Jupiter */
.jupiter-orbit {
  width: 400px;
  height: 400px;
  animation-duration: 25s;
}
.jupiter {
  width: 40px;
  height: 40px;
  background: brown;
  right: 0;
}

/* Saturn */
.saturn-orbit {
  width: 480px;
  height: 480px;
  animation-duration: 30s;
}
.saturn {
  width: 35px;
  height: 35px;
  background: goldenrod;
  right: 0;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); /* simple ring */
}

/* Uranus */
.uranus-orbit {
  width: 560px;
  height: 560px;
  animation-duration: 35s;
}
.uranus {
  width: 28px;
  height: 28px;
  background: lightblue;
  right: 0;
}

/* Neptune */
.neptune-orbit {
  width: 640px;
  height: 640px;
  animation-duration: 40s;
}
.neptune {
  width: 28px;
  height: 28px;
  background: darkblue;
  right: 0;
}

/* Orbit animation */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}