html, body {margin: 0; height: 100%; overflow: hidden}
body {
    background-image: url("images/bg.png");
    margin: 0;
    padding: 0;
    height: 20vmin;

    .WebContainer{
      width: 100%;
      height: auto;
  }
  .articles{
      width:90%; /*Takes 90% width from WebContainer*/
      height: auto;
      margin: auto;
  } 
}



.object {
  border-radius: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY( 0vmin );
}

.p-orbit, #m-orbit{
  position:absolute;
  
  border: 0.3vmin dotted lightgrey;
  opacity: 0.;
  background: transparent;
}


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

#m-orbit {
  height: 7vmin;
  width: 7vmin;
 background: transparent;
}

.planet, #moon {
  z-index: 1;
}

mn{
  height: 1vmin;
  width: 1vmin;
}

#sun {
  height: 8vmin;
  width: 8vmin;
}

#moon {
  height: 1vmin;
  width: 1vmin;
  background: white;
}

#mercury {
  height: 2.3vmin;
  width: 2.3vmin;

}

#venus {
  height: 3vmin;
  width: 3vmin;
}

#earth {
  height: 4vmin;
  width: 4vmin;
}

#mars {
  height: 3.5vmin;
  width: 3.5vmin;
}

#jupiter {
  height: 10vmin;
  width: 10vmin;
}

#saturn {
  height: 10vmin;
  width: 10vmin;
  border-radius: 0%;
}

#uranus {
  height: 5vmin;
  width: 5vmin;
}

#neptune {
  height: 4vmin;
  width: 4vmin;
}