html, 
body {
    /* The universe takes up all available space */
    
width: 100%;
    
height: 100%;
    
    
/* The universe is black */
    
   background: url(http://www.wallpapermint.com/wp-content/uploads/2012/01/Space-HD-Wallpaper_Pack2-7.jpg) fixed top ;
    }
#sun 
{
    position: absolute;
    
/* Positions the top-left corner of the image to be *
   
 /* in the middle of the box */
    

top: 18%;
    left: 22%;
    
   
 /* Play with these numbers to see what it does */
    
height: 200px;
    
width: 200px;
   
 margin-top: 100px; 
   
 margin-left: 100px;
    
    
border-radius: 50%;
    
    
box-shadow:red 20px 10px 500px 10px;
opacity:0.8;
filter:alpha(opacity=80);
}



#earth {
    /* Style your earth */ 
    
position: absolute;
    
top:0%;
    
left: 50%;
    
height: 50px;
    
width: 50px;
    
margin-top: -25px;
    
margin-left: -25px;
    
    
border-radius: 50%;
    
    
box-shadow: white 0px 0px 30px 10px;
}


#earth-orbit {
    /* For Section #2 */
    
position: absolute;
    
top: 60%;
    
left: 40%;
    
width: 400px;
    
height: 400px;
    
margin-top:-250px;
    
margin-left:-250px;
    
border: 0px dotted white;    
border-radius:50%;
    
-webkit-animation: spin-right 10s linear infinite;
 
-webkit-animation: spin-right 10s linear infinite;
 -moz-animation: spin-right 10s linear infinite;
    -ms-animation: spin-right 10s linear infinite;
    -o-animation: spin-right 10s linear infinite;
  } 

#uranus {
position: absolute;

top: 30%;

left:50%; 
height:90px;

width: 90px;

margin-top: 20px;

margin-left: 300px;

border-radius:50%;

box-shadow: blue 0px 0px 100px 8px;
}
    

 
#uranus-orbit {
    position: absolute;
    
top: 52%;
    
left:30%;
    
width: 5px;
    
height: 5px;
    
margin-top:0.4px;
    margin-left:120px;
    
border: 0px dotted white;    
    border-radius:50%;
    
-webkit-animation: spin-right 10s linear infinite;
    -moz-animation: spin-right 10s linear infinite;
    -ms-animation: spin-right 10s linear infinite;
    -o-animation: spin-right 10s linear infinite;
     animation: spin-right 10s linear infinite;}  

@-webkit-keyframes spin-right {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin-right {
    100% {
        
-webkit-transform: rotate(360deg);
        
-moz-transform: rotate (360deg);
        
-ms-transform: rotate(360deg);
        
-o-transform: rotate(360deg);
        
transform: rotate(360deg);
    }
}