/* ================= BODY ================= */
body {
  background: black;
  overflow: hidden;
}

/* ================= SOLAR SYSTEM ================= */
.solar-system {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* ================= SUN ================= */
.sun {
  position: absolute;
  width: 6vw;
  height: 6vw;
  min-width: 50px;
  min-height: 50px;
  background: radial-gradient(circle, yellow, orange);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4vw yellow, 0 0 8vw orange;
}

/* ================= ORBITS ================= */
.orbit {
  position: absolute;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate linear infinite;
}

/* ================= PLANETS ================= */
.planet {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* ================= ANIMATION ================= */
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ================= PLANETS SCALE ================= */

/* Mercury */
.mercury-orbit { width: 10vw; height: 10vw; animation-duration: 4s; }
.mercury { width: 0.6vw; height: 0.6vw; min-width: 5px; min-height: 5px; background: gray; }

/* Venus */
.venus-orbit { width: 14vw; height: 14vw; animation-duration: 7s; }
.venus { width: 1vw; height: 1vw; min-width: 7px; min-height: 7px; background: orange; }

/* Earth */
.earth-orbit { width: 18vw; height: 18vw; animation-duration: 10s; }
.earth { width: 1.2vw; height: 1.2vw; min-width: 8px; min-height: 8px; background: blue; }

/* Mars */
.mars-orbit { width: 22vw; height: 22vw; animation-duration: 14s; }
.mars { width: 0.9vw; height: 0.9vw; min-width: 6px; min-height: 6px; background: red; }

/* Jupiter */
.jupiter-orbit { width: 28vw; height: 28vw; animation-duration: 20s; }
.jupiter { width: 2vw; height: 2vw; min-width: 14px; min-height: 14px; background: #d2b48c; }

/* Saturn */
.saturn-orbit { width: 34vw; height: 34vw; animation-duration: 25s; }
.saturn {
  width: 1.8vw;
  height: 1.8vw;
  min-width: 12px;
  min-height: 12px;
  background: #deb887;
  position: relative;
}

.saturn::after {
  content: "";
  position: absolute;
  width: 3vw;
  height: 1vw;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Uranus */
.uranus-orbit { width: 40vw; height: 40vw; animation-duration: 30s; }
.uranus { width: 1.3vw; height: 1.3vw; min-width: 9px; min-height: 9px; background: lightblue; }

/* Neptune */
.neptune-orbit { width: 46vw; height: 46vw; animation-duration: 35s; }
.neptune { width: 1.3vw; height: 1.3vw; min-width: 9px; min-height: 9px; background: blue; }

/* ================= MOBILE FIX ================= */
@media (max-width: 600px) {
  .sun {
    width: 12vw;
    height: 12vw;
  }

  .orbit {
    border: 1px dashed rgba(255,255,255,0.1);
  }
}