/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Layout */
body {
  background-color: black;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Solar System Container */
.solar-system {
  position: relative;
  width: 800px;
  height: 800px;
}

/* Sun */
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-image: url("sun.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px yellow;
}

/* Planet Orbits (general) */
.planet-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.planet {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Mercury */
.mercury-orbit {
  width: 140px;
  height: 140px;
  animation: rotate-mercury 10s linear infinite;
}
.mercury {
  width: 12px;
  height: 12px;
  background-image: url("mercury.jpeg");
}

/* Venus */
.venus-orbit {
  width: 200px;
  height: 200px;
  animation: rotate-venus 15s linear infinite;
}
.venus {
  width: 18px;
  height: 18px;
  background-image: url("venus.jpeg");
}

/* Earth */
.earth-orbit {
  width: 270px;
  height: 270px;
  animation: rotate-earth 20s linear infinite;
}
.earth {
  width: 20px;
  height: 20px;
  background-image: url("earth.jpg");
}

/* Mars */
.mars-orbit {
  width: 340px;
  height: 340px;
  animation: rotate-mars 25s linear infinite;
}
.mars {
  width: 17px;
  height: 17px;
  background-image: url("mars.jpeg");
}

/* Jupiter */
.jupiter-orbit {
  width: 420px;
  height: 420px;
  animation: rotate-jupiter 30s linear infinite;
}
.jupiter {
  width: 28px;
  height: 28px;
  background-image: url("jupiter.jpeg");
}

/* Saturn */
.saturn-orbit {
  width: 500px;
  height: 500px;
  animation: rotate-saturn 35s linear infinite;
}
.saturn {
  width: 26px;
  height: 26px;
  background-image: url("saturn.jpeg");
}

/* Uranus */
.uranus-orbit {
  width: 580px;
  height: 580px;
  animation: rotate-uranus 40s linear infinite;
}
.uranus {
  width: 22px;
  height: 22px;
  background-image: url("uranus.jpeg");
}

/* Neptune */
.neptune-orbit {
  width: 660px;
  height: 660px;
  animation: rotate-neptune 45s linear infinite;
}
.neptune {
  width: 22px;
  height: 22px;
  background-image: url("neptune.jpeg");
}

/* Orbit Animations */
@keyframes rotate-mercury {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-venus {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-earth {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-mars {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-jupiter {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-saturn {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-uranus {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-neptune {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}