body {
  margin: 0px;
  padding: 0px;
  background-image: url(../images/night-sky.jpg);
  background-size: 100%;
}

.sun {
  height: 80px;
  width: 80px;
  background-image: url(../images/sun.png);
  border-radius: 50%;
  background-size: 140px 140px;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 56px #f9c05f;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* background-color: red; */
  background-position: center;
  cursor: pointer;
}

.mercury {
  background-image: url(../images/mercury.png);
  height: 10px;
  width: 10px;
  background-size: 20px 20px;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 30px #dda443;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit2 5s linear infinite;
  background-position: center;
}

.mercury-outline {
  height: 150px;
  width: 150px;
}

p {
  color: white;
  font-family: system-ui;
  position: absolute;
  left: -62px;
  top: -11px;
}

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

.mercury-outline,
.venus-outline-1,
.earth-outline-1,
.mars-outline-1,
.jupiter-outline-1,
.saturn-outline-1,
.uranus-outline-1,
.neputune-outline-1 {
  border-radius: 50%;
  border: 0px dotted #ddd9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.venus {
  height: 30px;
  width: 30px;
  background-image: url(../images/venus.png);
  background-size: 37px 37px;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  box-shadow: -4px 2px 56px #e8cb9a;
  left: 43%;
  top: 43%;
  transform: translate(-50%, -50%);
  animation: orbit3 10s linear infinite;
  background-position: center;
}

.venus-outline-1 {
  height: 230px;
  width: 230px;
}

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

.earth {
  height: 30px;
  width: 30px;
  background-image: url(../images/earth.png);
  background-repeat: no-repeat;
  background-size: 55px 55px;
  /* background-color: red; */
  border-radius: 50%;
  position: absolute;
  box-shadow: -4px 4px 56px #0898ec;
  left: 43%;
  top: 43%;
  transform: translate(-50%, -50%);
  animation: orbit4 20s linear infinite;
  background-position: center;
}

.earth-outline-1 {
  height: 340px;
  width: 340px;
}

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

.earth-circle {
  height: 50px;
  width: 50px;
  border: 0px dotted #a7a3a3;
  position: relative;
  left: -10px;
  top: -10px;
  border-radius: 50%;
}

.earth-inner {
  height: 10px;
  width: 10px;
  background: rgb(162, 159, 159);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 43%;
  top: 43%;
  animation: orbit5 5s linear infinite;
}

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

.mars {
  height: 25px;
  width: 25px;
  background-image: url(../images/mars.png);
  background-size: 45px 45px;

  border-radius: 50%;
  position: absolute;
  box-shadow: -4px 2px 50px #efc196;
  left: 46.5%;
  top: 46.5%;
  transform: translate(-50%, -50%);
  animation: orbit6 25s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.mars-outline-1 {
  height: 450px;
  width: 450px;
}

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

.jupiter {
  height: 50px;
  width: 50px;
  background-image: url(../images/jupiter.png);
  background-size: 90px 90px;

  border-radius: 50%;
  position: absolute;
  box-shadow: -4px 2px 56px #cac2b9;
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit7 30s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.jupiter-outline-1 {
  height: 590px;
  width: 590px;
}

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

.satellite-circle {
  height: 80px;
  width: 80px;
  border: 0px dotted #fff;
  position: relative;
  left: -14px;
  top: -14px;
  border-radius: 50%;
}

.satellite-inner {
  background-image: url(../images/satellite.png);
  height: 10px;
  width: 10px;
  background-size: cover;

  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 37%;
  top: 37%;
  background-repeat: no-repeat;
  background-position: center;
  animation: orbit11 40s linear infinite;
}

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

.saturn {
  height: 55px;
  width: 55px;
  background-image: url(../images/saturn.png);
  background-size: 55px 55px;

  border-radius: 50%;
  position: absolute;
  /* box-shadow: 0px 0px 50px #cac2b9; */
  left: 45%;
  top: 45%;
  transform: translate(-50%, -50%);
  animation: orbit8 35s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.saturn-outline-1 {
  height: 720px;
  width: 720px;
}

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

.uranus {
  height: 40px;
  width: 40px;
  background-image: url(../images/uranus.png);
  background-size: 75px 75px;

  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 50px #0fdbd4;
  left: 47%;
  top: 47%;
  transform: translate(-50%, -50%);
  animation: orbit9 40s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.uranus-outline-1 {
  height: 840px;
  width: 840px;
}

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

.neptune {
  height: 40px;
  width: 40px;
  background-image: url(../images/neptune.png);
  background-size: 75px 75px;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 50px #0390f5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: orbit10 50s linear infinite;
  background-position: center;
  background-repeat: no-repeat;
}

.neptune-outline-1 {
  height: 900px;
  width: 900px;
}

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