/**
 * Keyframes.
 */
@-webkit-keyframes rotation {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotation-reverse {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotation-reverse {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
body {
  background-color: #000;
}

#sun {
  background-color: #aa0;
  height: 50px;
  left: calc(50% - 25px);
  position: absolute;
  top: calc(50% - 25px);
  width: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 0 10px 2px #aa5500;
  -webkit-box-shadow: 0 0 10px 2px #aa5500;
  box-shadow: 0 0 10px 2px #aa5500;
}

#mercury-orbit {
  -webkit-animation: rotation 8s linear infinite;
  animation: rotation 8s linear infinite;
  height: 10%;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 10%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

#mercury {
  background: #953;
  height: 10px;
  width: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 5px 1px #222222;
  -webkit-box-shadow: inset 0 0 5px 1px #222222;
  box-shadow: inset 0 0 5px 1px #222222;
}

#venus-orbit {
  -webkit-animation: rotation-reverse 16s linear infinite;
  animation: rotation-reverse 16s linear infinite;
  height: 14%;
  left: 43%;
  position: absolute;
  top: 43%;
  width: 14%;
}

#venus {
  background: #db5;
  height: 15px;
  width: 15px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 0 3px 0 #ffff88;
  -webkit-box-shadow: 0 0 3px 0 #ffff88;
  box-shadow: 0 0 3px 0 #ffff88;
}

#earth-orbit {
  -webkit-animation: rotation 24s linear infinite;
  animation: rotation 24s linear infinite;
  height: 20%;
  left: 40%;
  position: absolute;
  top: 40%;
  width: 20%;
}

#earth {
  background-color: #0bf;
  height: 20px;
  width: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 0 8px 1px white;
  -webkit-box-shadow: 0 0 8px 1px white;
  box-shadow: 0 0 8px 1px white;
}

#mars-orbit {
  -webkit-animation: rotation 44s linear infinite;
  animation: rotation 44s linear infinite;
  height: 30%;
  left: 35%;
  position: absolute;
  top: 35%;
  width: 30%;
}

#mars {
  background-color: #833;
  height: 18px;
  width: 18px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 5px #220000;
  -webkit-box-shadow: inset 0 0 5px #220000;
  box-shadow: inset 0 0 5px #220000;
}

#jupiter-orbit {
  -webkit-animation: rotation 68s linear infinite;
  animation: rotation 68s linear infinite;
  height: 40%;
  left: 30%;
  position: absolute;
  top: 30%;
  width: 40%;
}

#jupiter {
  background-color: #ffa500;
  height: 40px;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 10px 1px black;
  -webkit-box-shadow: inset 0 0 10px 1px black;
  box-shadow: inset 0 0 10px 1px black;
}

#jupiter-spot {
  background-color: rgba(160, 0, 0, 0.5);
  height: 8px;
  left: 20px;
  position: absolute;
  top: 19px;
  width: 8px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0 0 5px 0 #990000;
  -webkit-box-shadow: 0 0 5px 0 #990000;
  box-shadow: 0 0 5px 0 #990000;
}

#saturn-orbit {
  -webkit-animation: rotation 80s linear infinite;
  animation: rotation 80s linear infinite;
  height: 48%;
  left: 26%;
  position: absolute;
  top: 26%;
  width: 48%;
}

#saturn {
  background-color: #ab5;
  height: 36px;
  width: 36px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 5px #445511;
  -webkit-box-shadow: inset 0 0 5px #445511;
  box-shadow: inset 0 0 5px #445511;
}

#uranus-orbit {
  -webkit-animation: rotation 100s linear infinite;
  animation: rotation 100s linear infinite;
  height: 60%;
  left: 20%;
  position: absolute;
  top: 20%;
  width: 60%;
}

#uranus {
  background-color: #3da;
  height: 30px;
  width: 30px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 5px #445511;
  -webkit-box-shadow: inset 0 0 5px #445511;
  box-shadow: inset 0 0 5px #445511;
}

#neptune-orbit {
  -webkit-animation: rotation 120s linear infinite;
  animation: rotation 120s linear infinite;
  height: 70%;
  left: 15%;
  position: absolute;
  top: 15%;
  width: 70%;
}

#neptune {
  background-color: #05a;
  height: 32px;
  width: 32px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 10px 1px black;
  -webkit-box-shadow: inset 0 0 10px 1px black;
  box-shadow: inset 0 0 10px 1px black;
}

#pluto-orbit {
  -webkit-animation: rotation 120s linear infinite;
  animation: rotation 120s linear infinite;
  height: 70%;
  left: 15%;
  position: absolute;
  top: 15%;
  width: 70%;
}

#pluto {
  background-color: #7a7474;
  height: 10px;
  width: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 10px 1px black;
  -webkit-box-shadow: inset 0 0 10px 1px black;
  box-shadow: inset 0 0 10px 1px black;
}
