body {
  font-family: courier;
  margin: 0px;
  padding: 0px;
  background-color: black;
  color: white;
  overflow:hidden;
}

#system  > div {
  border-radius: 50%;
}

#top {
  z-index: 101;
  text-align: center;
  letter-spacing: 8px;
  font-size: 1.5em;
}

#stars {
  text-align: center;
  letter-spacing: 30px;
  font-size: 0.1em;
  z-index: -1;
}

/*
  transform origin: x y
  x = -(margin-left + (sun-width / 2) + (previous planet width / 2))
  y = height / 2
  Planet    Size    Distance  Orbit Time
  Sun       140
  Mercury    10     58px        21990ms
  Venus      24     108px       56170ms
  Earth      26     149px       91315ms
  Mars       14     227px      171745ms
  
  Sun Size / 10
  Planet Sizes * 2
  Orbits / 4
*/

.sun {
  position: absolute;
  background: #fbe4d2;
  margin-top: -70px;
  height: 140px;
  width: 140px;
  filter: blur(10px);
  z-index: 100;
}

/*
    margin-top = -(height / 2)
    margin-left = sun-size + distance
    transform origin x = -(margin-left - (sun-size / 2))
    transform origin y = height / 2
*/

.planet {
  position: absolute;
  filter: blur(1px);
  background: linear-gradient(to right, #a7a195, #bfc0c4);
  box-shadow: 0px -2px 0px black inset;
  height: 10px;
  width: 10px;
  margin-top: 128px;
  margin-left: 65px;
  transform-origin: 5px -128px;
  animation: rotateAround 21990ms linear infinite;
  z-index: 99;
}

.planet2 {
  position: absolute;
  filter: blur(1px);
  background: linear-gradient(to right, #b6b0a4, #4d492d);
  box-shadow: 4px 0px 4px black inset;
  height: 24px;
  width: 24px;
  margin-top: -12px;
  margin-left: -132px;
  transform-origin: 202px 12px;
  animation: rotateAround 56170ms linear infinite;
  z-index: 99;
}

.planet3extra1 {
  display: none;
}

.planet3extra2 {
  display: none;
}
  
@media only screen and (min-width: 500px) and (min-height: 600px) {
  .planet3 {
    position: absolute;
    filter: blur(2px);
    background: linear-gradient(to right, #2e3b73, #0f132e);
    box-shadow: 0px 5px 2px black inset;
    height: 26px;
    width: 26px;
    margin-top: -245px;
    margin-left: 57px;
    transform-origin: 13px 245px;
    animation: rotateAround 91315ms linear infinite;
    z-index: 99;
  }
  
  .planet3extra1 {
    display: block;
    position: absolute;
    filter: blur(0.7px);
    font-size: 0.7em;
    font-weight: bold;
    font-style: italic;
    color: #587335;
    height: 26px;
    width: 26px;
    margin-top: -235px;
    margin-left: 70px;
    transform-origin: 0px 235px;
    animation: rotateAround 91315ms linear infinite;
    z-index: 100;
  }  
  
  .planet3extra2 {
    display: block;
    position: absolute;
    filter: blur(0.7px);
    font-size: 0.7em;
    font-weight: bold;
    font-style: italic;
    color: #587335;
    height: 26px;
    width: 26px;
    margin-top: -240px;
    margin-left: 60px;
    transform-origin: 10px 240px;
    animation: rotateAround 91315ms linear infinite;
    z-index: 100;
  }  
}

@media only screen and (min-width: 650px) and (min-height: 750px) {
  .planet4 {
    position: absolute;
    filter: blur(1px);
    background: linear-gradient(to right, #fd815b, #50453f);
    box-shadow: -2px 0px 2px black inset;
    height: 14px;
    width: 14px;
    margin-top: -7px;
    margin-left: 367px;
    transform-origin: -297px 7px;
    animation: rotateAround 171745ms linear infinite;
    z-index: 99;
  }
}
/*
.planet5 {
  position: absolute;
  filter: blur(1px);
  background: linear-gradient(to right, #fd815b, #50453f);
  box-shadow: -2px 0px 2px black inset;
  height: 284px;
  width: 284px;
  margin-top: -7px;
  margin-left: 919px;
  transform-origin: -849px 142px;
  animation: rotateAround 1710ms linear infinite;
  z-index: 99;
}
*/

/*
  x : height and width
  y : margin-left
  z : margin-top
  
  x = ((sun-size / 2 + distance) + planet-size / 2) * 2
  y = -((width / 2) - (sun-size / 2) + border-size) 
  z = (height / 2) + border-size
*/

.planet1_orbit {
  position: absolute;
  margin-left: -64px;
  margin-top: -134px;
  height: 266px;
  width: 266px;
  border-style: solid;
  border-width: 1px;
  border-color: #7c7b7f;
  z-index: 4;
}

.planet2_orbit {
  position: absolute;
  margin-top: -191px;
  margin-left: -121px;
  height: 380px;
  width: 380px;
  border-style: solid;
  border-width: 1px;
  border-color: #b6b0a4;
  z-index: 3;
}

@media only screen and (min-width: 500px) and (min-height: 600px) {
  .planet3_orbit {
    position: absolute;
    margin-top: -233px;
    margin-left: -163px;
    height: 464px;
    width: 464px;
    border-style: dotted;
    border-width: 1px;
    border-color: #2e3b73;
    z-index: 2;
  }
}

@media only screen and (min-width: 650px) and (min-height: 750px) {
  .planet4_orbit {
    position: absolute;
    margin-top: -305px;
    margin-left: -235px;
    height: 608px;
    width: 608px;
    border-style: dotted;
    border-width: 1px;
    border-color: #6f4a30;
    z-index: 1;
  }
}
/*
.planet1_orbit:hover, .planet2_orbit:hover, .planet3_orbit:hover, .planet4_orbit:hover {
  background-color: rgba(255, 0, 0, 0.1);
}

.sun:hover  {
  background-color: rgba(255, 0, 0, 1);
}
*/

#system {
  position: absolute;
  margin-left: -70px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

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