body {
  background-color: #000010;
  margin: 0;
  overflow: hidden;
}

.system {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.sun {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  background-color: gold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 50px gold;
}

.planet-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
}

.planet {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  transform: translate(-50%, -50%) rotate(-360deg);
}

[data-planet="mercury"] {
  animation: rotate 8s linear infinite;
}
[data-planet="venus"] {
  animation: rotate 20s linear infinite;
}
[data-planet="earth"] {
  animation: rotate 30s linear infinite;
}
[data-planet="mars"] {
  animation: rotate 50s linear infinite;
}
[data-planet="jupiter"] {
  animation: rotate 150s linear infinite;
}
[data-planet="saturn"] {
  animation: rotate 300s linear infinite;
}
[data-planet="uranus"] {
  animation: rotate 600s linear infinite;
}
[data-planet="neptune"] {
  animation: rotate 1000s linear infinite;
}
[data-planet="pluto"] {
  animation: rotate 1300s linear infinite;
}

.mercury { width: 4px; height: 4px; background-color: rosybrown; top: 0; left: 10vh; }
.venus { width: 5px; height: 5px; background-color: pink; top: 0; left: 15vh; }
.earth { width: 7px; height: 7px; background-color: mediumturquoise; top: 0; left: 20vh; }
.mars { width: 6px; height: 6px; background-color: red; top: 0; left: 25vh; }
.jupiter { width: 20px; height: 20px; background-color: #C2B280; top: 0; left: 32vh; }
.saturn { width: 18px; height: 18px; background-color: darkkhaki; top: 0; left: 40vh; }
.saturn-rings {
  width: 36px;
  height: 6px;
  background-color: yellow;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 36vh;
  transform: translate(-50%, -50%) rotate(45deg);
}
.uranus { width: 16px; height: 16px; background-color: lightblue; top: 0; left: 48vh; }
.neptune { width: 16px; height: 16px; background-color: royalblue; top: 0; left: 56vh; }
.pluto { width: 3px; height: 3px; background-color: beige; top: 0; left: 64vh; }

@keyframes rotate {
  from { transform: rotate(var(--start-angle, 0deg)); }
  to { transform: rotate(calc(360deg + var(--start-angle, 0deg))); }
}

.moon-orbit {
  width: 2vh;
  height: 2vh;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate 2s linear infinite;
}

.moon {
  width: 2px;
  height: 2px;
  background-color: lightgray;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 2vh;
}

.ufo {
  width: 1vw;
  height: 0.2vw;
  background-color: cyan;
  border-radius: 50%;
  position: absolute;
  animation: moveUfo 60s linear infinite;
}

@keyframes moveUfo {
  0% { top: -20vh; left: -20vw; }
  31% { top: 70vh; left: -10vw; }
  34% { top: 20vh; left: 110vw; }
  92% { top: 110vh; left: 110vw; }
  94% { top: -10vh; left: 30vw; }
  95% { top: -50vh; left: -50vw; }
  100% { top: -50vh; left: -50vw; }
}

.oumuamua {
  width: 1vh;
  height: 0.3vh;
  background-color: #aaa;
  position: absolute;
  transform: rotate(45deg);
  animation: oumuamuaFly 120s linear infinite;
}

@keyframes oumuamuaFly {
  0% { top: -10vh; left: 110vw; }
  100% { top: 110vh; left: -10vw; }
}

.asteroid, .asteroid2, .asteroid3 {
  position: absolute;
  width: 2px;
  height: 2px;
  background: gray;
  border-radius: 50%;
  animation: asteroidOrbit 200s linear infinite;
}

.asteroid { top: 50%; left: 70%; }
.asteroid2 { top: 30%; left: 40%; animation-duration: 150s; }
.asteroid3 { top: 20%; left: 80%; animation-duration: 180s; }

@keyframes asteroidOrbit {
  0% { transform: rotate(0deg) translateX(30vh) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(30vh) rotate(-360deg); }
}

body {
  background-color: #000010;
  margin: 0;
  overflow: hidden;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02) 0%, transparent 70%),
                    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.015) 0%, transparent 70%),
                    radial-gradient(circle at 50% 50%, rgba(100,100,255,0.03) 0%, transparent 80%);
  background-repeat: no-repeat;
  background-size: cover;
}

.system {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.1s linear;
}

/* Updated Oumuamua style */
.oumuamua {
  width: 2vh;
  height: 0.5vh;
  background-color: #aaa;
  border-radius: 0.3vh;
  position: absolute;
  transform: rotate(45deg);
  animation: oumuamuaFly 120s linear infinite;
}

@keyframes oumuamuaFly {
  0% { top: -10vh; left: 110vw; }
  100% { top: 110vh; left: -10vw; }
}