body {
  background-color: #24252a;
}

h1 {
  text-align: center;
  font-family: Raleway;
  margin: 40px 0 0 0;
  color: #fff;
}

.orbit-container {
  position: relative;
  margin: 0 auto;
  width: 800px;
  height: 800px;
  top: 40px;
}

.orbit {
  position: absolute;
  border-radius: 100%;
  border: solid 3px rgba(137, 196, 244, 0.1);
  transition: .2s;
}

#sun {
  position: absolute;
  top: calc(320px - 40px);
  left: calc(50% - 40.2px);
  width: 86.4340px;
  height: 86.4340px;
  background: linear-gradient(#fcd670, #f2784b);
  border-radius: 100%;
  box-shadow: 0px 0px 8px 8px rgba(242, 120, 75, 0.2);
  transition: .3s;
}

#mercury-orbit {
  top: 245px;
  left: calc(50% - 75px);
  width: 150px;
  height: 150px;
  -webkit-animation: spin-right 1.2s linear infinite;
  animation: spin-right 1.2s linear infinite;
}

#mercury {
  position: absolute;
  width: 3px;
  height: 3px;
  top: 74px;
  left: -4px;
  border-radius: 100%;
  background: linear-gradient(#fafafa, silver);
}

#venus-orbit {
  width: 225px;
  height: 225px;
  top: 206px;
  left: calc(50% - 112.5px);
  -webkit-animation: spin-right 3.08s linear infinite;
  animation: spin-right 3.08s linear infinite;
}

#venus {
  position: absolute;
  width: 7.5px;
  height: 7.5px;
  top: 100px;
  left: -5px;
  border-radius: 100%;
  background: linear-gradient(#a537fd, #d5b8ff)
}

#earth-orbit {
  width: 300px;
  height: 300px;
  top: 170px;
  left: calc(50% - 150px);
  -webkit-animation: spin-right 5s linear infinite;
  animation: spin-right 5s linear infinite;
}

#earth {
  position: absolute;
  width: 7.9175px;
  height: 7.9175px;
  top: 105px;
  border-radius: 100%;
  background: linear-gradient(#19b5fe, #7befb2);
}

#mars-orbit {
  width: 375px;
  height: 375px;
  top: 135px;
  left: calc(50% - 187.5px);
  -webkit-animation: spin-right 9.4s linear infinite;
  animation: spin-right 9.4s linear infinite;
}

#mars {
  position: absolute;
  top: 120px;
  left: 9px;
  width: 4.2123px;
  height: 4.2123px;
  border-radius: 100%;
  background: linear-gradient(#ff9478, #eb974e)
}

#jupiter-orbit {
  width: 450px;
  height: 450px;
  top: 98px;
  left: calc(50% - 225px);
  -webkit-animation: spin-right 60s linear infinite;
  animation: spin-right 60s linear infinite;
}

#jupiter {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 145px;
  border-radius: 100%;
  background: linear-gradient(#f8c291, #e58e26);
}

#saturn-orbit {
  width: 525px;
  height: 525px;
  top: 62px;
  left: calc(50% - 262.5px);
  -webkit-animation: spin-right 145s linear infinite;
  animation: spin-right 145s linear infinite;
}

#saturn,
#saturn-rings{
  position: absolute;
  width: 15px;
  height: 15px;
  top: 145px;
  left: 15px;
  border-radius: 100%;
  background: linear-gradient(#8d6e63, #ffe0b2)
}

#saturn-rings {
  height: 30px;
  left: 15px;
  top: 138px;
  background: rgba(255, 236, 179,0.25)
}

#uranus-orbit {
  width: 600px;
  height: 600px;
  top: 25px;
  left: calc(50% - 300px);
  -webkit-animation: spin-right 420s linear infinite;
  animation: spin-right 420s linear infinite;
}

#uranus {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 220px;
  border-radius: 100%;
  background: linear-gradient(#81ecec, #00cec9);
}

#neptune-orbit {
  width: 675px;
  height: 675px;
  top: -10px;
  left: calc(50% - 337.5px);
  -webkit-animation: spin-right 825s linear infinite;
  animation: spin-right 825s linear infinite;
}

#neptune {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 270px;
  left: 0;
  border-radius: 100%;
  background: linear-gradient(#74b9ff, #0984e3);
  -webkit-animation: spin-right 990s linear infinite;
  animation: spin-right 990s linear infinite;
}

#planet-list {
  display: flex;
  list-style: none;
  font-family: Raleway;
  color: white;
  justify-content: center;
}

#planet-list li {
  margin: 10px;
  cursor: pointer;
}

#planet-list li a {
  text-decoration: none;
  color: white;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}