html{
    background-color: #000;
  }
  body{
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  .wrapper{
    position: relative;
    margin: 0 auto;
    display: block;
    margin-top: 200px;
    perspective: 1000px;
    perspective-origin: 60% 50%;
    transform: rotate(-10deg);
  }
  .wrapper > div{
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    height: 0;
  }
  .sun{
    width: 250px;
    position: absolute;
    top: 0;
    z-index: 1;
    height: 125px !important;
  }
  
  .sun .star{
    width: 250px;
    height: 250px;
    background: url(../img/sun.png) no-repeat;
    background-size: cover;
    border-radius: 250px;
    margin: 0 auto;
    animation: spinsun 40s infinite linear;
  }
  .planet{
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    animation-iteration-count: infinite;
    overflow: hidden;
  }
  
  .shadow{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent url(../img/shadow.png) 0% 0% no-repeat;
    background-size: cover;
    border-radius: 100%; 
  }
  .murcury{
    position: absolute;
    width: 400px;
    z-index: 2;
    animation: orbitmurcury 12s infinite linear;
    top: -7.5px; 
  }
  .murcury .planet{
    width: 15px;
    height: 15px;
    background-image: url(../img/mercury.png);
    animation: anti-spin 12s infinite linear;
  }
  .murcury .shadow{
    animation: shadow 12s infinite linear;
  }
  
  .venus{
    position: absolute;
    width: 506px;
    z-index: 3;
    animation: orbitvenus 15s infinite linear;
    top: -19px;
  }
  .venus .planet{
    width: 38px;
    height: 38px;
    background-image: url(../img/venus.png);
    animation: anti-spin 15s infinite linear;
  }
  .venus .shadow{
    animation: shadow 15s infinite linear;
  }
  .earth{
    position: absolute;
    width: 610px;
    z-index: 4;
    animation: orbitearth 20s infinite linear;
    top: -20px;
  }
  .earth .planet{
    width: 40px;
    height: 40px;
    background-image: url(../img/earth.png);
    animation: anti-spin 20s infinite linear;
  }
  .earth .shadow{
    animation: shadow 20s infinite linear;
  }
  .mars{
    position: absolute;
    width: 706px;
    z-index: 5;
    animation: orbitmars 30s infinite linear;
    top: -11px;
  }
  .mars .planet{
    width: 22px;
    height: 22px;
    background-image: url(../img/mars.png);
    animation: anti-spin 30s infinite linear;
  }
  .mars .shadow{
    animation: shadow 30s infinite linear;
  }
  .jupiter{
    position: absolute;
    width: 1100px;
    z-index: 6;
    animation: orbitjupiter 50s infinite linear;
    top: -64px;
  }
  
  .jupiter .planet{
    width: 128px;
    height: 128px;
    background-image: url(../img/jupiter.png);
    animation: anti-spin 50s infinite linear;
  }
  .jupiter .shadow{
    animation: shadow 50s infinite linear;
  }
  .sat{
    position: absolute;
    width: 900px;
    z-index: 7;
    animation: orbitsat 5s infinite linear;
    top: -10px;
  }
  .sat .planet{
    width: 30px;
    height: 25px;
    background-image: url(../img/satt.png);
    animation: anti-spin 5s infinite linear;
  }
  .sat .shadow{
    animation: shadow 5s infinite linear;
  }
  
  
  @keyframes spinsun{
    0%{
      transform: rotate(0);
    }
    100%{
      transform: rotate(-360deg);
    }
  }
  @keyframes shadow{
    0%{
      background-position: 130% 0%;
    }
    33%{
      background-position: 50% 0%;
    }
    55%{
      background-position: 0% 0%;
    }
    80%{
      background-position: -50% 0%;
    }
    100%{
      background-position: -50% 0%;
    }
  }
  @keyframes orbitmurcury{
    0%{
      z-index: 2;
      transform: rotateY(0);
    }
    49%{
      z-index: 2;
    }
    50%{
      z-index: -2;
    }
    99%{
      z-index: -2;
    }
    100%{
      z-index: 2;
      transform: rotateY(360deg);
    }
  }
  
  @keyframes orbitvenus{
    0%{
      z-index: 3;
      transform: rotateY(0);
    }
    49%{
      z-index: 3;
    }
    50%{
      z-index: -3;
    }
    99%{
      z-index: -3;
    }
    100%{
      z-index: 3;
      transform: rotateY(360deg);
    }
  }
  @keyframes orbitearth{
    0%{
      z-index: 4;
      transform: rotateY(0);
    }
    49%{
      z-index: 4;
    }
    50%{
      z-index: -4;
    }
    99%{
      z-index: -4;
    }
    100%{
      z-index: 4;
      transform: rotateY(360deg);
    }
  }
  
  @keyframes orbitmars{
    0%{
      z-index: 5;
      transform: rotateY(0);
    }
    49%{
      z-index: 5;
    }
    50%{
      z-index: -5;
    }
    99%{
      z-index: -5;
    }
    100%{
      z-index: 5;
      transform: rotateY(360deg);
    }
  }
  
  @keyframes orbitsat{
    0%{
      z-index: 7;
      transform: rotateY(0);
    }
    49%{
      z-index: 7;
    }
    50%{
      z-index: -7;
    }
    99%{
      z-index: -7;
    }
    100%{
      z-index: 7;
      transform: rotateY(360deg);
    }
  }
  
  @keyframes orbitjupiter{
    0%{
      z-index: 6;
      transform: rotateY(0);
    }
    49%{
      z-index: 6;
    }
    50%{
      z-index: -6;
    }
    99%{
      z-index: -6;
    }
    100%{
      z-index: 6;
      transform: rotateY(360deg);
    }
  }
  
  @keyframes anti-spin{
    form{
      transform: rotateY(0);
    }
    to{
      transform: rotateY(-360deg);
    }
  }
  @keyframes anti-spin-rings{
    form{
      transform: rotateY(0) rotateX(73deg);
    }
    to{
      transform: rotateY(-360deg) rotateX(73deg);
    }
  }