:root {
  --sun-image: url('../images/index/sun.jpg');
  --sun-tilt: rotate(0deg);
  --sun-hours: 24.5s;
  --sun-days: 0;
  --sun-color: #cc9f4c;

  --mercury-image: url('../images/index/mercury.jpg');
  --mercury-tilt: rotate(0.034deg);
  --mercury-hours: 1407.6s;
  --mercury-days: 87s;
  --mercury-color: #999999;

  --venus-image: url('../images/index/venus.jpg');
  --venus-tilt: rotate(177.3deg);
  --venus-hours: 5832.5s;
  --venus-days: 224s;
  --venus-color: #e8cda2;

  --earth-image: url('../images/index/earth.jpg');
  --earth-tilt: rotate(23.26deg);
  --earth-hours: 23.9s;
  --earth-days: 365s;
  --earth-color: #b3caff;

  --mars-image: url('../images/index/mars.jpg');
  --mars-tilt: rotate(25.2deg);
  --mars-hours: 24.6s;
  --mars-days: 687s;
  --mars-color: #c07158;

  --jupiter-image: url('../images/index/jupiter.jpg');
  --jupiter-tilt: rotate(3.1deg);
  --jupiter-hours: 9.9s;
  --jupiter-days: 4331s;
  --jupiter-color: #c9b5a4;

  --saturn-image: url('../images/index/saturn.jpg');
  --saturn-tilt: rotate(26.7deg);
  --saturn-hours: 10.7s;
  --saturn-days: 10747s;
  --saturn-color: #f0e2c4;

  --uranus-image: url('../images/index/uranus.jpg');
  --uranus-tilt: rotate(97.8deg);
  --uranus-hours: 17.2s;
  --uranus-days: 30589s;
  --uranus-color: #b8d8e1;

  --neptune-image: url('../images/index/neptune.jpg');
  --neptune-tilt: rotate(28.3deg);
  --neptune-hours: 16.1s;
  --neptune-days: 59802s;
  --neptune-color: #5e73bb;

  --year-in-second: 30;
  --day-in-second: 1;
}



#solar-system {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  max-height: 800px;
  overflow: hidden;
}

#solar-system div {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
}

#solar-system .planet-orbit {
  border: solid 1px rgba(200, 200, 200, 0.2);
}

#solar-system .planet {
  top: 0;
}

@keyframes PlanetOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes PlanetRotate {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}

#sun {
  margin-top: -20px;
  margin-left: -20px;
  width: 40px;
  height: 40px;
}
#sun .planet {
  margin-left: -20px;
  width: 40px;
  height: 40px;
}
#sun .planet-inner {
  margin-top: -200px;
  margin-left: -200px;
  width: 400px;
  height: 400px;
  background-image: var(--sun-image);
  background-color: var(--sun-color);
  transform: var(--sun-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--sun-hours)/var(--day-in-second)) linear infinite;
  box-shadow: 0 0 50px 10px var(--sun-color), 0 0 500px 100px rgba(204, 159, 76, 0.6);
}

#mercury {
  margin-top: -35px;
  margin-left: -35px;
  width: 70px;
  height: 70px;
  animation: PlanetOrbit calc(var(--mercury-days) / var(--year-in-second)) linear infinite;
}
#mercury .planet {
  margin-top: -2px;
  margin-left: -2px;
  width: 4px;
  height: 4px;
}
#mercury .planet-inner {
  margin-top: -20px;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: var(--mercury-image);
  background-color: var(--mercury-color);
  transform: var(--mercury-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--mercury-hours)/var(--day-in-second)) linear infinite;
}

#venus {
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  animation: PlanetOrbit calc(var(--venus-days) / var(--year-in-second)) linear infinite;
}
#venus .planet {
  margin-top: -4px;
  margin-left: -4px;
  width: 8px;
  height: 8px;
}
#venus .planet-inner {
  margin-top: -40px;
  margin-left: -40px;
  width: 80px;
  height: 80px;
  background-image: var(--venus-image);
  background-color: var(--venus-color);
  transform: var(--venus-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--venus-hours)/var(--day-in-second)) linear infinite;
}

#earth {
  margin-top: -72.5px;
  margin-left: -72.5px;
  width: 145px;
  height: 145px;
  animation: PlanetOrbit calc(var(--earth-days) / var(--year-in-second)) linear infinite;
}
#earth .planet {
  margin-top: -3px;
  margin-left: -3px;
  width: 6px;
  height: 6px;
}
#earth .planet-inner {
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-image: var(--earth-image);
  background-color: var(--earth-color);
  transform: var(--earth-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--earth-hours)/var(--day-in-second)) linear infinite;
}

#mars {
  margin-top: -95px;
  margin-left: -95px;
  width: 190px;
  height: 190px;
  animation: PlanetOrbit calc(var(--mars-days) / var(--year-in-second)) linear infinite;
}
#mars .planet {
  margin-top: -3px;
  margin-left: -3px;
  width: 6px;
  height: 6px;
}
#mars .planet-inner {
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background-image: var(--mars-image);
  background-color: var(--mars-color);
  transform: var(--mars-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--mars-hours)/var(--day-in-second)) linear infinite;
}

#jupiter {
  margin-top: -170px;
  margin-left: -170px;
  width: 340px;
  height: 340px;
  animation: PlanetOrbit calc(var(--jupiter-days) / var(--year-in-second)) linear infinite;
}
#jupiter .planet {
  margin-top: -9px;
  margin-left: -9px;
  width: 18px;
  height: 18px;
}
#jupiter .planet-inner {
  margin-top: -90px;
  margin-left: -90px;
  width: 180px;
  height: 180px;
  background-image: var(--jupiter-image);
  background-color: var(--jupiter-color);
  transform: var(--jupiter-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--jupiter-hours)/var(--day-in-second)) linear infinite;
}

#saturn {
  margin-top: -220px;
  margin-left: -220px;
  width: 440px;
  height: 440px;
  animation: PlanetOrbit calc(var(--saturn-days) / var(--year-in-second)) linear infinite;
}
#saturn .planet {
  margin-top: -6px;
  margin-left: -6px;
  width: 12px;
  height: 12px;
}
#saturn .planet-inner {
  margin-top: -60px;
  margin-left: -60px;
  width: 120px;
  height: 120px;
  background-image: var(--saturn-image);
  background-color: var(--saturn-color);
  transform: var(--saturn-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--saturn-hours)/var(--day-in-second)) linear infinite;
}
#saturn:after {
  position: absolute;
  content: "";
  width: 4.676%;
  height: 2.34%;
  top: 0px;
  left: 50%;
  margin-top: -1.2%;
  margin-left: -2.3%;
  border-radius: 50% 50% 50% 50%;
  box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
  transform: rotateZ(-52deg);
  transform-origin: 52% 60%;
  animation: PlanetOrbit calc(var(--saturn-days) / var(--year-in-second)) linear infinite;
  animation-direction: reverse;
}

#uranus {
  margin-top: -260px;
  margin-left: -260px;
  width: 520px;
  height: 520px;
  animation: PlanetOrbit calc(var(--uranus-days) / var(--year-in-second)) linear infinite;
}
#uranus .planet {
  margin-top: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
}
#uranus .planet-inner {
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-image: var(--uranus-image);
  background-color: var(--uranus-color);
  transform: var(--uranus-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--uranus-hours)/var(--day-in-second)) linear infinite;
}

#neptune {
  margin-top: -315px;
  margin-left: -315px;
  width: 630px;
  height: 630px;
  animation: PlanetOrbit calc(var(--neptune-days) / var(--year-in-second)) linear infinite;
}
#neptune .planet {
  margin-top: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
}
#neptune .planet-inner {
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-image: var(--neptune-image);
  background-color: var(--neptune-color);
  transform: var(--neptune-tilt) scale(0.1);
  animation: PlanetRotate calc(var(--neptune-hours)/var(--day-in-second)) linear infinite;
}

#asteroids-belt {
  margin-top: -150px;
  margin-left: -150px;
  width: 300px;
  height: 300px;
  opacity: 0.7;
  border-color: transparent;
  animation: PlanetOrbit calc(1500s / var(--year-in-second)) linear infinite;
}
#asteroids-belt div {
  position: absolute;
  margin-top: -1px;
  margin-left: -1px;
  width: 2px;
  height: 2px;
  background: #fff;
}