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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
  overflow: hidden;
}

.container {
  position: relative;
  width: 800px;
  height: 800px;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sun */
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(255, 180, 0, 0.8);
}

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

/* Planets */
.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-size: cover;
}

/* Mercury */
.orbit-mercury { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation: orbit 10s linear infinite; }
.mercury { width: 10px; height: 10px; background-image: url('Img/mercury.png'); transform: translate(-50%, -50%) translateX(50px); }

/* Venus */
.orbit-venus { width: 140px; height: 140px; margin: -70px 0 0 -70px; animation: orbit 15s linear infinite; }
.venus { width: 14px; height: 14px; background-image: url('Img/venus.png'); transform: translate(-50%, -50%) translateX(70px); }

/* Earth */
.orbit-earth { width: 180px; height: 180px; margin: -90px 0 0 -90px; animation: orbit 20s linear infinite; }
.earth { width: 18px; height: 18px; transform: translate(-50%, -50%) translateX(90px); position: relative; }
.moon-orbit { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; animation: orbit 2s linear infinite; }
.moon { width: 6px; height: 6px; background-image: url('Img/moon.png'); background-size: cover; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(15px); }

/* Mars */
.orbit-mars { width: 220px; height: 220px; margin: -110px 0 0 -110px; animation: orbit 25s linear infinite; }
.mars { width: 12px; height: 12px; background-image: url('Img/mars.png'); transform: translate(-50%, -50%) translateX(110px); }

/* Jupiter */
.orbit-jupiter { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation: orbit 30s linear infinite; }
.jupiter { width: 30px; height: 30px; background-image: url('Img/jupiter.png'); transform: translate(-50%, -50%) translateX(150px); }

/* Saturn */
.orbit-saturn { width: 360px; height: 360px; margin: -180px 0 0 -180px; animation: orbit 35s linear infinite; }
.saturn { width: 28px; height: 28px; background-image: url('Img/saturn.png'); transform: translate(-50%, -50%) translateX(180px); }

/* Anneaux de Saturne */
.saturn-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 15px;
  margin: -7.5px 0 0 -25px;
  border: 2px solid rgba(200, 200, 200, 0.5);
  border-radius: 50%; 
  transform: rotate(25deg);
  animation: ring-rotate 20s linear infinite;
  pointer-events: none;
}

/* Uranus */
.orbit-uranus { width: 420px; height: 420px; margin: -210px 0 0 -210px; animation: orbit 40s linear infinite; }
.uranus { width: 20px; height: 20px; background-image: url('Img/uranus.png'); transform: translate(-50%, -50%) translateX(210px); }

/* Neptune */
.orbit-neptune { width: 480px; height: 480px; margin: -240px 0 0 -240px; animation: orbit 45s linear infinite; }
.neptune { width: 18px; height: 18px; background-image: url('Img/neptune.png'); transform: translate(-50%, -50%) translateX(240px); }

/* Pluto */
.orbit-pluto { width: 540px; height: 540px; margin: -270px 0 0 -270px; animation: orbit 50s linear infinite; }
.pluto { width: 8px; height: 8px; background-image: url('Img/pluto.png'); transform: translate(-50%, -50%) translateX(270px); }

/* Orbit animation */
@keyframes orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@keyframes ring-rotate {
  0% { transform: rotate(25deg); }
  100% { transform: rotate(385deg); }
}

/* Stars */
.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
}