style.css

body {
  margin: 0px;
  padding: 0px;
  background-color: rgb(5, 2, 37);
  background-size: 100%;
}
.sun {
  height: 120px;
  width: 120px;
  background-color: yellow;
  border-radius: 50%;
  background-size: cover;
  box-shadow: -4px 2px 56px rgb(219, 219, 8);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mercury {
  height: 30px;
  width: 30px;
  background-color: rgb(167, 123, 30);
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px rgb(192, 147, 22);
  position: absolute;
  left: 46%;
  top: 42%;
  transform: translate(-50%, -50%);
  animation: orbit2 5s linear infinite;
}
@keyframes orbit2 {
  from {
    transform: rotate(0deg) translateX(70px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(70px) rotate(-360deg);
  }
}
p {
  color: white;
  font-family: system-ui;
  position: absolute;
  left: -62px;
  top: -11px;
}
.mercury-outline,
.venus-outline-1,
.earth-outline-1,
.mars-outline-1,
.jupiter-outline-1,
.saturn-outline-1,
.urans-outline-1,
.neptune-outline-1 {
  border-radius: 50%;
  border: 1px dotted #ddd9;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mercury-outline {
  height: 140px;
  width: 140px;
}
.venus {
  height: 40px;
  width: 40px;
  background-color: rgb(245, 185, 108);
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px rgb(255, 217, 159);
  position: absolute;
  left: 40%;
  top: 42%;
  transform: translate(-50%, -50%);
  animation: orbit3 10s linear infinite;
}
@keyframes orbit3 {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}
.venus-outline-1 {
  height: 200px;
  width: 200px;
}
.earth {
  height: 50px;
  width: 50px;
  background-color: darkgreen;
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px rgb(16, 180, 16);
  position: absolute;
  left: 44%;
  top: 43%;
  transform: translate(-50%, -50%);
  animation: orbit4 20s linear infinite;
}
@keyframes orbit4 {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}
.earth-outline-1 {
  height: 300px;
  width: 300px;
}
.earth-circle {
  height: 65px;
  width: 65px;
  border-radius: 40px;
  position: relative;
  left: -8px;
  top: -8px;
  border: 1px dotted #fff;
}
.earth-inner {
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit5 3s linear infinite;
}
@keyframes orbit5 {
  from {
    transform: rotate(0deg) translateX(33px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(33px) rotate(-360deg);
  }
}
.mars {
  height: 40px;
  width: 40px;
  background-color: rgb(170, 14, 14);
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px #ff0000;
  position: absolute;
  left: 46.5%;
  top: 46.5%;
  transform: translate(-50%, -50%);
  animation: orbit6 25s linear infinite;
}
@keyframes orbit6 {
  from {
    transform: rotate(0deg) translateX(185px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(185px) rotate(-360deg);
  }
}
.mars-outline-1 {
  height: 370px;
  width: 370px;
}
.jupiter {
  height: 40px;
  width: 40px;
  background-color: rgb(173, 148, 148);
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px #4c8694;
  position: absolute;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit7 30s linear infinite;
}
@keyframes orbit7 {
  from {
    transform: rotate(0deg) translateX(217px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(217px) rotate(-360deg);
  }
}
.jupiter-outline-1 {
  height: 430px;
  width: 430px;
}
.saturn {
  height: 60px;
  width: 60px;
  background-color: rgb(185, 49, 185);
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px #d12ac3;
  position: absolute;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit9 40s linear infinite;
}
@keyframes orbit9 {
  from {
    transform: rotate(0deg) translateX(250px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(250px) rotate(-360deg);
  }
}
.saturn-outline-1 {
  height: 500px;
  width: 500px;
}
.urans {
  height: 50px;
  width: 50px;
  background-color: rgb(0, 255, 221);
  border-radius: 50%;
  box-shadow: -4px 2px 56px #8afff9;
  background-size: 100%;
  position: absolute;
  left: 38%;
  top: 48%;
  transform: translate(-50%, -50%);
  animation: orbit10 50s linear infinite;
}
@keyframes orbit10 {
  from {
    transform: rotate(0deg) translateX(280px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(280px) rotate(-360deg);
  }
}
.urans-outline-1 {
  height: 560px;
  width: 560px;
}
.neptune {
  height: 40px;
  width: 40px;
  background-color: #3b4df3;
  border-radius: 50%;
  background-size: 100%;
  box-shadow: -4px 2px 56px #3b4df3;
  position: absolute;
  left: 48%;
  top: 48%;
  transform: translate(-50%, -50%);
  animation: orbit11 60s linear infinite;
}
@keyframes orbit11 {
  from {
    transform: rotate(0deg) translateX(310px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(310px) rotate(-360deg);
  }
}
.neptune-outline-1 {
  height: 620px;
  width: 620px;
}
.earth,
.moon {
  position: absolute;
  border-style: solid;
  border-color: white transparent transparent transparent;
  border-width: 0.1em 0.1em 0 0;
  border-radius: 50%;
}