.sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mercury {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: tan;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
  cursor: pointer;
  -moz-animation: mercuryOrbit 2.89s linear infinite;
  -webkit-animation: mercuryOrbit 2.89s linear infinite;
  animation: mercuryOrbit 2.89s linear infinite;
}

.venus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: peru;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
  cursor: pointer;
  -moz-animation: venusOrbit 7.4s linear infinite;
  -webkit-animation: venusOrbit 7.4s linear infinite;
  animation: venusOrbit 7.4s linear infinite;
}

.earth {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12.5px;
  margin-top: -12.5px;
  cursor: pointer;
  -moz-animation: earthOrbit 12s linear infinite;
  -webkit-animation: earthOrbit 12s linear infinite;
  animation: earthOrbit 12s linear infinite;
}

.moon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: darkgray;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -3.5px;
  margin-top: -3.5px;
  cursor: pointer;
  -moz-animation: moonOrbit 0.89s linear infinite;
  -webkit-animation: moonOrbit 0.89s linear infinite;
  animation: moonOrbit 0.89s linear infinite;
}

.mars {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6.5px;
  margin-top: -6.5px;
  cursor: pointer;
  -moz-animation: marsOrbit 22.58s linear infinite;
  -webkit-animation: marsOrbit 22.58s linear infinite;
  animation: marsOrbit 22.58s linear infinite;
}

.jupiter {
  width: 275px;
  height: 275px;
  border-radius: 50%;
  background-color: peru;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -137.5px;
  margin-top: -137.5px;
  cursor: pointer;
  -moz-animation: jupiterOrbit 142s linear infinite;
  -webkit-animation: jupiterOrbit 142s linear infinite;
  animation: jupiterOrbit 142s linear infinite;
}

.saturn {
  width: 228px;
  height: 228px;
  border-radius: 50%;
  background-color: peru;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -114px;
  margin-top: -114px;
  cursor: pointer;
  -moz-animation: saturnOrbit 353s linear infinite;
  -webkit-animation: saturnOrbit 353s linear infinite;
  animation: saturnOrbit 353s linear infinite;
}

.saturn-rings {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 100px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
}

.uranus {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: aqua;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  cursor: pointer;
  -moz-animation: uranusOrbit 1008s linear infinite;
  -webkit-animation: uranusOrbit 1008s linear infinite;
  animation: uranusOrbit 1008s linear infinite;
}

.neptune {
  width: 97px;
  height: 97px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -48.3px;
  margin-top: -48.3px;
  cursor: pointer;
  -moz-animation: neptuneOrbit 1980s linear infinite;
  -webkit-animation: neptuneOrbit 1980s linear infinite;
  animation: neptuneOrbit 1980s linear infinite;
}

.pluto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: lightblue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.5px;
  margin-top: -4.5px;
  cursor: pointer;
  -moz-animation: plutoOrbit 2972s linear infinite;
  -webkit-animation: plutoOrbit 2972s linear infinite;
  animation: plutoOrbit 2972s linear infinite;
}

@-moz-keyframes mercuryOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(77px) rotate(0deg);
    transform: rotate(0deg) translateX(77px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(77px) rotate(-360deg);
    transform: rotate(360deg) translateX(77px) rotate(-360deg);
  }
}
@-webkit-keyframes mercuryOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(77px) rotate(0deg);
    transform: rotate(0deg) translateX(77px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(77px) rotate(-360deg);
    transform: rotate(360deg) translateX(77px) rotate(-360deg);
  }
}
@keyframes mercuryOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(77px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(77px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(77px) rotate(0deg);
    transform: rotate(0deg) translateX(77px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(77px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(77px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(77px) rotate(-360deg);
    transform: rotate(360deg) translateX(77px) rotate(-360deg);
  }
}
@-moz-keyframes venusOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(144px) rotate(0deg);
    transform: rotate(0deg) translateX(144px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(144px) rotate(-360deg);
    transform: rotate(360deg) translateX(144px) rotate(-360deg);
  }
}
@-webkit-keyframes venusOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(144px) rotate(0deg);
    transform: rotate(0deg) translateX(144px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(144px) rotate(-360deg);
    transform: rotate(360deg) translateX(144px) rotate(-360deg);
  }
}
@keyframes venusOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(144px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(144px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(144px) rotate(0deg);
    transform: rotate(0deg) translateX(144px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(144px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(144px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(144px) rotate(-360deg);
    transform: rotate(360deg) translateX(144px) rotate(-360deg);
  }
}
@-moz-keyframes earthOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(200px) rotate(0deg);
    transform: rotate(0deg) translateX(200px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(200px) rotate(-360deg);
    transform: rotate(360deg) translateX(200px) rotate(-360deg);
  }
}
@-webkit-keyframes earthOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(200px) rotate(0deg);
    transform: rotate(0deg) translateX(200px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(200px) rotate(-360deg);
    transform: rotate(360deg) translateX(200px) rotate(-360deg);
  }
}
@keyframes earthOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(200px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(200px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(200px) rotate(0deg);
    transform: rotate(0deg) translateX(200px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(200px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(200px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(200px) rotate(-360deg);
    transform: rotate(360deg) translateX(200px) rotate(-360deg);
  }
}
@-moz-keyframes moonOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(30px) rotate(0deg);
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(30px) rotate(-360deg);
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}
@-webkit-keyframes moonOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(30px) rotate(0deg);
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg);
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}
@keyframes moonOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(30px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(30px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(30px) rotate(0deg);
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(30px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(30px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg);
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}
@-moz-keyframes marsOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(304px) rotate(0deg);
    transform: rotate(0deg) translateX(304px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(304px) rotate(-360deg);
    transform: rotate(360deg) translateX(304px) rotate(-360deg);
  }
}
@-webkit-keyframes marsOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(304px) rotate(0deg);
    transform: rotate(0deg) translateX(304px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(304px) rotate(-360deg);
    transform: rotate(360deg) translateX(304px) rotate(-360deg);
  }
}
@keyframes marsOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(304px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(304px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(304px) rotate(0deg);
    transform: rotate(0deg) translateX(304px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(304px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(304px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(304px) rotate(-360deg);
    transform: rotate(360deg) translateX(304px) rotate(-360deg);
  }
}
@-moz-keyframes jupiterOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(1040px) rotate(0deg);
    transform: rotate(0deg) translateX(1040px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(1040px) rotate(-360deg);
    transform: rotate(360deg) translateX(1040px) rotate(-360deg);
  }
}
@-webkit-keyframes jupiterOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(1040px) rotate(0deg);
    transform: rotate(0deg) translateX(1040px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(1040px) rotate(-360deg);
    transform: rotate(360deg) translateX(1040px) rotate(-360deg);
  }
}
@keyframes jupiterOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(1040px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(1040px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(1040px) rotate(0deg);
    transform: rotate(0deg) translateX(1040px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(1040px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(1040px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(1040px) rotate(-360deg);
    transform: rotate(360deg) translateX(1040px) rotate(-360deg);
  }
}
@-moz-keyframes saturnOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(1980px) rotate(0deg);
    transform: rotate(0deg) translateX(1980px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(1980px) rotate(-360deg);
    transform: rotate(360deg) translateX(1980px) rotate(-360deg);
  }
}
@-webkit-keyframes saturnOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(1980px) rotate(0deg);
    transform: rotate(0deg) translateX(1980px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(1980px) rotate(-360deg);
    transform: rotate(360deg) translateX(1980px) rotate(-360deg);
  }
}
@keyframes saturnOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(1980px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(1980px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(1980px) rotate(0deg);
    transform: rotate(0deg) translateX(1980px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(1980px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(1980px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(1980px) rotate(-360deg);
    transform: rotate(360deg) translateX(1980px) rotate(-360deg);
  }
}
@-moz-keyframes uranusOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(3840px) rotate(0deg);
    transform: rotate(0deg) translateX(3840px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(3840px) rotate(-360deg);
    transform: rotate(360deg) translateX(3840px) rotate(-360deg);
  }
}
@-webkit-keyframes uranusOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(3840px) rotate(0deg);
    transform: rotate(0deg) translateX(3840px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(3840px) rotate(-360deg);
    transform: rotate(360deg) translateX(3840px) rotate(-360deg);
  }
}
@keyframes uranusOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(3840px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(3840px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(3840px) rotate(0deg);
    transform: rotate(0deg) translateX(3840px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(3840px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(3840px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(3840px) rotate(-360deg);
    transform: rotate(360deg) translateX(3840px) rotate(-360deg);
  }
}
@-moz-keyframes neptuneOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(6020px) rotate(0deg);
    transform: rotate(0deg) translateX(6020px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(6020px) rotate(-360deg);
    transform: rotate(360deg) translateX(6020px) rotate(-360deg);
  }
}
@-webkit-keyframes neptuneOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(6020px) rotate(0deg);
    transform: rotate(0deg) translateX(6020px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(6020px) rotate(-360deg);
    transform: rotate(360deg) translateX(6020px) rotate(-360deg);
  }
}
@keyframes neptuneOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(6020px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(6020px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(6020px) rotate(0deg);
    transform: rotate(0deg) translateX(6020px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(6020px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(6020px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(6020px) rotate(-360deg);
    transform: rotate(360deg) translateX(6020px) rotate(-360deg);
  }
}
@-moz-keyframes plutoOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(7900px) rotate(0deg);
    transform: rotate(0deg) translateX(7900px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(7900px) rotate(-360deg);
    transform: rotate(360deg) translateX(7900px) rotate(-360deg);
  }
}
@-webkit-keyframes plutoOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(7900px) rotate(0deg);
    transform: rotate(0deg) translateX(7900px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(7900px) rotate(-360deg);
    transform: rotate(360deg) translateX(7900px) rotate(-360deg);
  }
}
@keyframes plutoOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(7900px) rotate(0deg);
    -ms-transform: rotate(0deg) translateX(7900px) rotate(0deg);
    -webkit-transform: rotate(0deg) translateX(7900px) rotate(0deg);
    transform: rotate(0deg) translateX(7900px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg) translateX(7900px) rotate(-360deg);
    -ms-transform: rotate(360deg) translateX(7900px) rotate(-360deg);
    -webkit-transform: rotate(360deg) translateX(7900px) rotate(-360deg);
    transform: rotate(360deg) translateX(7900px) rotate(-360deg);
  }
}
.pluto-orbit {
  width: 15800px;
  height: 15800px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.neptune-orbit {
  width: 12040px;
  height: 12040px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.uranus-orbit {
  width: 7680px;
  height: 7680px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.saturn-orbit {
  width: 3960px;
  height: 3960px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.jupiter-orbit {
  width: 2080px;
  height: 2080px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mars-orbit {
  width: 608px;
  height: 608px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.earth-orbit {
  width: 400px;
  height: 400px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.venus-orbit {
  width: 288px;
  height: 288px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mercury-orbit {
  width: 154px;
  height: 154px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.orbit-rings {
  border: 1px solid rgba(255, 255, 255, 0.3);
  -moz-animation: fadein 1s;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.solar-system {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: -moz-radial-gradient(#000000, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 71%);
  background: -webkit-radial-gradient(#000000, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 71%);
  background: radial-gradient(#000000, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 71%);
}

.body-content {
  display: inline-block;
  height: 100%;
}

.controls {
  height: 2em;
  width: 100%;
  color: white;
  position: fixed;
  z-index: 8;
  top: 5em;
}

.planet-buttons {
  float: left;
  width: 25%;
  margin: 1em 0;
  text-align: center;
  font-size: 1.4em;
  padding: 0 3em;
}

.rings, .static-orbit, .active-orbit, .clear-info, .scale, .scale-off {
  background-color: rgba(0, 0, 0, 0.5);
  padding: .5em 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.rings:hover, .static-orbit:hover, .active-orbit:hover, .clear-info:hover, .scale:hover, .scale-off:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: black;
  cursor: pointer;
}

.active {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}

.galaxy {
  position: absolute;
  top: 55%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.galaxy-staticOn {
  -moz-animation: staticOn 3s ease;
  -webkit-animation: staticOn 3s ease;
  animation: staticOn 3s ease;
  left: 0;
}

@-moz-keyframes staticOn {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}
@-webkit-keyframes staticOn {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}
@keyframes staticOn {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}
.galaxy-staticOff {
  -moz-animation: staticOff 3s ease;
  -webkit-animation: staticOff 3s ease;
  animation: staticOff 3s ease;
}

@-moz-keyframes staticOff {
  from {
    left: 0;
  }
  to {
    left: 50%;
  }
}
@-webkit-keyframes staticOff {
  from {
    left: 0;
  }
  to {
    left: 50%;
  }
}
@keyframes staticOff {
  from {
    left: 0;
  }
  to {
    left: 50%;
  }
}
::-webkit-scrollbar {
  display: none;
}

.no-vertical {
  overflow-y: hidden;
}

.sun:hover *:not(.moon) {
  -moz-animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

.mercury-info {
  position: fixed;
  bottom: 1%;
  right: 1%;
}

.venus-info {
  position: fixed;
  bottom: 1%;
  right: 1%;
}

.earth-info {
  position: fixed;
  bottom: 1%;
  right: 1%;
}

.mars-info {
  position: fixed;
  bottom: 1%;
  right: 1%;
}

.no-info {
  display: none;
}

header {
  position: fixed;
  z-index: 9;
}

footer {
  background-color: rgba(0, 0, 0, 0.29804);
  height: 3em;
  position: fixed;
  z-index: 8;
  bottom: 0;
  width: 100%;
}

.footer-section {
  margin-left: 5%;
  padding-top: 1em;
  color: rgba(255, 255, 255, 0.7);
}

.footer-section p {
  margin: 0;
  float: left;
  padding-right: 3em;
}

.no-orbit {
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

.back-arrow, nav {
  position: relative;
  z-index: 9;
}

.button-type {
  float: left;
  width: 33%;
  padding: 0.5em 0;
}

.toggle-button {
  float: left;
  width: 33%;
  padding: 0 0.5em;
}