Edit in JSFiddle

<div id="all">
  <div id="spacecon">

    <div id="outlineUranus">

      <div id='squareNeptune'>
        <div id='neptune'></div>
      </div>


    </div>


    <div id="outlineSaturn">

      <div id='squareUranus'>
        <div id='uranus'></div>
      </div>


    </div>


    <div id="outlineJupiter">

      <div id='squareSaturn'>
        <div id='saturn'></div>
      </div>


    </div>

    <div id="outlineMars">

      <div id='squareJupiter'>
        <div id='jupiter'></div>
      </div>


    </div>

    <div id="outlineEarth">

      <div id='squareMars'>
        <div id='mars'></div>
      </div>


    </div>

    <div id="outlineVenus">

      <div id='squareEarth'>


        <div id='earth'>

          <div id="" style="width:30px;height:30px;border-radius:50%;border:1px solid #1e2b3d;margin-top:-10px;margin-left:-10px;position:absolute;">

            <div id='squareMoon'>
              <div id='moon'></div>
            </div>


          </div>

        </div>


      </div>


    </div>

    <div id="outlineMercury">

      <div id='squareVenus'>
        <div id='venus'></div>
      </div>


    </div>

    <div id="outlineSun">


      <div id='squareMercury'>
        <div id='mercury'></div>
      </div>

      <div id="sun"></div>

    </div>


  </div>
</div>
body {
  /*background: linear-gradient(to top, #121923, #1A2634);*/
  /*background: radial-gradient(at -100%,#121923, #1A2634, black);*/
  
  background-image: url("http://i.ytimg.com/vi/qbzFSfWwp-w/maxresdefault.jpg");
  height: 900px;
}

#all {
  margin-top: -75px;
  position: absolute;
  margin-left: 40%;
  /* make visual for example */
  
  width: 700px;
  height: 100%;
}

#outlineSun {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  top: 54%;
}

#squareMercury {
  width: 100px;
  height: 100px;
  animation-name: spin;
  animation-duration: 7200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12.5px;
}

#mercury {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, gray, white);
  box-shadow: 0 0 5px gray;
}

@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

#sun {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: -90px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(to bottom, yellow, orange);
  box-shadow: 0 0 30px orange;
  z-index: 100;
}
/* VENUS */

#outlineMercury {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -36.0px;
  top: 49.5%;
}

#squareVenus {
  width: 160px;
  height: 160px;
  animation-name: spin;
  animation-duration: 18600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 17.5px;
  ;
}

#venus {
  width: 10%;
  height: 10%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, brown, orange);
  box-shadow: 0 0 5px brown;
}
/* Earth */

#outlineVenus {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -76.0px;
  top: 44.5%;
}

#squareEarth {
  width: 210px;
  height: 210px;
  animation-name: spin;
  animation-duration: 30000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 36px;
}

#earth {
  width: 5%;
  height: 5%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, deepskyblue, lightblue);
  box-shadow: 0 0 5px skyblue;
}
/* MOON */

#outlineEarthMoon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -76.0px;
  top: 44.5%;
}

#squareMoon {
  width: 27px;
  height: 27px;
  animation-name: spin;
  animation-duration: 2219ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1px;
}

#moon {
  width: 15%;
  height: 15%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, darkgray, white);
  box-shadow: 0 0 5px white;
}
/* MARS */

#outlineEarth {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -113.0px;
  top: 39.5%;
}

#squareMars {
  width: 265px;
  height: 265px;
  animation-name: spin;
  animation-duration: 56400ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
}

#mars {
  width: 3%;
  height: 3%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, firebrick, orangered);
  box-shadow: 0 0 5px brown;
}
/* Jupiter */

#outlineMars {
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -210.0px;
  top: 27%;
}

#squareJupiter {
  width: 455px;
  height: 455px;
  animation-name: spin;
  animation-duration: 355800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
}

#jupiter {
  width: 12%;
  height: 12%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, brown, saddlebrown);
  box-shadow: 0 0 5px brown;
}
/* Saturn */

#outlineJupiter {
  width: 660px;
  height: 660px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -260.0px;
  top: 21%;
}

#squareSaturn {
  width: 495px;
  height: 495px;
  animation-name: spin;
  animation-duration: 883800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}

#saturn {
  width: 5%;
  height: 5%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, lightgoldenrodyellow, goldenrod);
  box-shadow: 0 0 5px brown;
}
/* Uranus */

#outlineSaturn {
  width: 760px;
  height: 760px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -310.0px;
  top: 15%;
}

#squareUranus {
  width: 555px;
  height: 555px;
  animation-name: spin;
  animation-duration: 2520300ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}

#uranus {
  width: 3%;
  height: 3%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, deepskyblue, lightblue);
  box-shadow: 0 0 5px skyblue;
}
/* Neptune */

#outlineUranus {
  width: 860px;
  height: 860px;
  border-radius: 50%;
  border: 1px solid #1e2b3d;
  position: absolute;
  z-index: -1;
  margin-left: -360.0px;
  top: 10%;
}

#squareNeptune {
  width: 630px;
  height: 630px;
  animation-name: spin;
  animation-duration: 4944000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
  margin-top: 110px;
}

#neptune {
  width: 3%;
  height: 3%;
  border-radius: 50%;
  top: 0;
  margin-left: 0;
  background: linear-gradient(to bottom, deepskyblue, darkcyan);
  box-shadow: 0 0 5px lightblue;
}