html, body {
  height: 100%;
  overflow: hidden; }

.stage {
  position: absolute;
  perspective: 5000px;
  left: 50%;
  top: 50%;
  transform: translate3d(0, 0, 0) rotateX(70deg) rotateY(-80deg) rotateZ(20deg);
  transform-style: preserve-3d; }
  .stage .planet {
    position: absolute;
    transform-style: preserve-3d; }
  .stage .planet-orbit {
    position: absolute;
    transform-style: preserve-3d;
    border: 1px solid currentColor;
    opacity: 0.5;
    transform: translate3d(0, 0, 0) rotateX(90deg); }
  .stage .inner, .stage .inner > * {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; }
  .stage .side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid currentColor;
    box-shadow: 0 0 15px currentColor; }
  .stage .side:nth-child(1) {
    transform: translate3d(0, 0, 0) rotateY(40deg); }
  .stage .side:nth-child(2) {
    transform: translate3d(0, 0, 0) rotateY(80deg); }
  .stage .side:nth-child(3) {
    transform: translate3d(0, 0, 0) rotateY(120deg); }
  .stage .side:nth-child(4) {
    transform: translate3d(0, 0, 0) rotateY(160deg); }
  .stage .side:nth-child(5) {
    transform: translate3d(0, 0, 0) rotateY(200deg); }
  .stage .side:nth-child(6) {
    transform: translate3d(0, 0, 0) rotateY(240deg); }
  .stage .side:nth-child(7) {
    transform: translate3d(0, 0, 0) rotateY(280deg); }
  .stage .side:nth-child(8) {
    transform: translate3d(0, 0, 0) rotateY(320deg); }
  .stage .side:nth-child(9) {
    transform: translate3d(0, 0, 0) rotateY(360deg); }
  .stage .side:nth-child(10) {
    width: 50%;
    height: 50%; }
  .stage .side:nth-child(11) {
    width: 86.6%;
    height: 86.6%; }
  .stage .side:nth-child(12) {
    transform: translate3d(0, 0, 0) rotateX(90deg); }
  .stage .side:nth-child(13) {
    width: 86.6%;
    height: 86.6%; }
  .stage .side:nth-child(14) {
    width: 50%;
    height: 50%; }

#sun {
  width: 200px;
  height: 200px;
  color: #f70;
  left: 0;
  transform-origin: 100px 100px;
  animation: revolution 100s infinite linear;
  will-change: transform; }
  #sun-orbit {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    color: #f70; }
  #sun .inner {
    will-change: transform;
    animation: rotation 100s infinite linear; }
  #sun .side:nth-child(10) {
    transform: translate3d(50px, -36.6px, 0) rotateX(90deg); }
  #sun .side:nth-child(11) {
    transform: translate3d(13.4px, -36.6px, 0) rotateX(90deg); }
  #sun .side:nth-child(13) {
    transform: translate3d(13.4px, 63.4px, 0) rotateX(90deg); }
  #sun .side:nth-child(14) {
    transform: translate3d(50px, 123.2px, 0) rotateX(90deg); }
  #sun .side {
    box-shadow: 0 0 40px currentColor; }

#mercury {
  width: 5px;
  height: 5px;
  color: #1EEDFF;
  left: -150px;
  transform-origin: 152.5px 2.5px;
  animation: revolution 3s infinite linear;
  will-change: transform; }
  #mercury-orbit {
    left: -150px;
    top: -150px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    color: #1EEDFF; }
  #mercury .inner {
    will-change: transform;
    animation: rotation 5s infinite linear; }
  #mercury .side:nth-child(10) {
    transform: translate3d(1.25px, -0.915px, 0) rotateX(90deg); }
  #mercury .side:nth-child(11) {
    transform: translate3d(0.335px, -0.915px, 0) rotateX(90deg); }
  #mercury .side:nth-child(13) {
    transform: translate3d(0.335px, 1.585px, 0) rotateX(90deg); }
  #mercury .side:nth-child(14) {
    transform: translate3d(1.25px, 3.08px, 0) rotateX(90deg); }

#venus {
  width: 6px;
  height: 6px;
  color: yellow;
  left: -160px;
  transform-origin: 163px 3px;
  animation: revolution 4s infinite linear;
  will-change: transform; }
  #venus-orbit {
    left: -160px;
    top: -160px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    color: yellow; }
  #venus .inner {
    will-change: transform;
    animation: rotation 6s infinite linear; }
  #venus .side:nth-child(10) {
    transform: translate3d(1.5px, -1.098px, 0) rotateX(90deg); }
  #venus .side:nth-child(11) {
    transform: translate3d(0.402px, -1.098px, 0) rotateX(90deg); }
  #venus .side:nth-child(13) {
    transform: translate3d(0.402px, 1.902px, 0) rotateX(90deg); }
  #venus .side:nth-child(14) {
    transform: translate3d(1.5px, 3.696px, 0) rotateX(90deg); }

#earth {
  width: 30px;
  height: 30px;
  color: #4EA9F3;
  left: -280px;
  transform-origin: 295px 15px;
  animation: revolution 10s infinite linear;
  will-change: transform; }
  #earth-orbit {
    left: -280px;
    top: -280px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    color: #4EA9F3; }
  #earth .inner {
    will-change: transform;
    animation: rotation 10s infinite linear; }
  #earth .side:nth-child(10) {
    transform: translate3d(7.5px, -5.49px, 0) rotateX(90deg); }
  #earth .side:nth-child(11) {
    transform: translate3d(2.01px, -5.49px, 0) rotateX(90deg); }
  #earth .side:nth-child(13) {
    transform: translate3d(2.01px, 9.51px, 0) rotateX(90deg); }
  #earth .side:nth-child(14) {
    transform: translate3d(7.5px, 18.48px, 0) rotateX(90deg); }

#mars {
  width: 28px;
  height: 28px;
  color: red;
  left: -320px;
  transform-origin: 334px 14px;
  animation: revolution 11s infinite linear;
  will-change: transform; }
  #mars-orbit {
    left: -320px;
    top: -320px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    color: red; }
  #mars .inner {
    will-change: transform;
    animation: rotation 11s infinite linear; }
  #mars .side:nth-child(10) {
    transform: translate3d(7px, -5.124px, 0) rotateX(90deg); }
  #mars .side:nth-child(11) {
    transform: translate3d(1.876px, -5.124px, 0) rotateX(90deg); }
  #mars .side:nth-child(13) {
    transform: translate3d(1.876px, 8.876px, 0) rotateX(90deg); }
  #mars .side:nth-child(14) {
    transform: translate3d(7px, 17.248px, 0) rotateX(90deg); }

#jupiter {
  width: 100px;
  height: 100px;
  color: #FFA631;
  left: -400px;
  transform-origin: 450px 50px;
  animation: revolution 30s infinite linear;
  will-change: transform; }
  #jupiter-orbit {
    left: -400px;
    top: -400px;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    color: #FFA631; }
  #jupiter .inner {
    will-change: transform;
    animation: rotation 20s infinite linear; }
  #jupiter .side:nth-child(10) {
    transform: translate3d(25px, -18.3px, 0) rotateX(90deg); }
  #jupiter .side:nth-child(11) {
    transform: translate3d(6.7px, -18.3px, 0) rotateX(90deg); }
  #jupiter .side:nth-child(13) {
    transform: translate3d(6.7px, 31.7px, 0) rotateX(90deg); }
  #jupiter .side:nth-child(14) {
    transform: translate3d(25px, 61.6px, 0) rotateX(90deg); }

#saturn {
  width: 90px;
  height: 90px;
  color: #A88462;
  left: -450px;
  transform-origin: 495px 45px;
  animation: revolution 36s infinite linear;
  will-change: transform; }
  #saturn-orbit {
    left: -450px;
    top: -450px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    color: #A88462; }
  #saturn .inner {
    will-change: transform;
    animation: rotation 22s infinite linear; }
  #saturn .side:nth-child(10) {
    transform: translate3d(22.5px, -16.47px, 0) rotateX(90deg); }
  #saturn .side:nth-child(11) {
    transform: translate3d(6.03px, -16.47px, 0) rotateX(90deg); }
  #saturn .side:nth-child(13) {
    transform: translate3d(6.03px, 28.53px, 0) rotateX(90deg); }
  #saturn .side:nth-child(14) {
    transform: translate3d(22.5px, 55.44px, 0) rotateX(90deg); }

#uranus {
  width: 40px;
  height: 40px;
  color: #4B5CC4;
  left: -520px;
  transform-origin: 540px 20px;
  animation: revolution 50s infinite linear;
  will-change: transform; }
  #uranus-orbit {
    left: -520px;
    top: -520px;
    width: 1040px;
    height: 1040px;
    border-radius: 50%;
    color: #4B5CC4; }
  #uranus .inner {
    will-change: transform;
    animation: rotation 40s infinite linear; }
  #uranus .side:nth-child(10) {
    transform: translate3d(10px, -7.32px, 0) rotateX(90deg); }
  #uranus .side:nth-child(11) {
    transform: translate3d(2.68px, -7.32px, 0) rotateX(90deg); }
  #uranus .side:nth-child(13) {
    transform: translate3d(2.68px, 12.68px, 0) rotateX(90deg); }
  #uranus .side:nth-child(14) {
    transform: translate3d(10px, 24.64px, 0) rotateX(90deg); }

#neptune {
  width: 40px;
  height: 40px;
  color: #177CB0;
  left: -600px;
  transform-origin: 620px 20px;
  animation: revolution 60s infinite linear;
  will-change: transform; }
  #neptune-orbit {
    left: -600px;
    top: -600px;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    color: #177CB0; }
  #neptune .inner {
    will-change: transform;
    animation: rotation 43s infinite linear; }
  #neptune .side:nth-child(10) {
    transform: translate3d(10px, -7.32px, 0) rotateX(90deg); }
  #neptune .side:nth-child(11) {
    transform: translate3d(2.68px, -7.32px, 0) rotateX(90deg); }
  #neptune .side:nth-child(13) {
    transform: translate3d(2.68px, 12.68px, 0) rotateX(90deg); }
  #neptune .side:nth-child(14) {
    transform: translate3d(10px, 24.64px, 0) rotateX(90deg); }

@keyframes rotation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateY(0deg); }
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(360deg) rotateY(0deg); } }

@keyframes revolution {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateX(0deg) rotateY(0deg) rotateY(0deg); }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateX(0deg) rotateY(360deg) rotateY(0deg); } }