body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background: black;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px),
                    radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px;
  background-position: 0 0, 50px 50px;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  font-family: Arial, sans-serif;
}

.solar-system {
  width: 100vmin; /* To keep it responsive and using viewport minimum */
  height: 100vmin;
}

.sun {
  transform-origin: center;
}

.planet {
  transform-origin: 100px 100px; 
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  fill-opacity: 0.8;
}

.orbit1 {
  animation: orbit1 10s infinite linear;
}

.orbit2 {
  animation: orbit2 15s infinite linear;
}

.orbit3 {
  animation: orbit3 20s infinite linear;
}

@keyframes orbit1 {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes orbit2 {
  from { transform: rotate(0deg) translateX(-30px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(-30px) rotate(-360deg); }
}

@keyframes orbit3 {
  from { transform: rotate(0deg) translateY(60px) rotate(0deg); }
  to { transform: rotate(360deg) translateY(60px) rotate(-360deg); }
}