body{
  background-color: #04020c;
}

.circle {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  position: absolute;
}


#neptune{
  	height: 200px;
  	width: 200px;
  	border-radius: 50%;
    background-color: #4682e2;
    position: absolute;
  	top: 250px;
  	left:0px;
    animation-duration: 55s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#mars{
  	height: 100px;
  	width:100px;
  	border-radius: 50%;
   	background-color: #e23b3b;
    position: absolute;
  	top: 250px;
  	left: 1275px;
  	animation-duration: 40s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#jupiter{
  	height: 300px;
  	width: 300px;
  	border-radius: 50%;
    background-color: #e2c63b;
    position: absolute;
  	top: 250px;
  	left: 875px;
    animation-duration: 50s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;

}

#earth{
  	height: 150px;
  	width: 150px;
  	border-radius: 50%;
  	background-color: #3d80ed;
  	position: absolute;
  	top: 250px;
  	left: 1500px;
  	animation-duration: 35s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#uranus{
  	height: 225px;
  	width: 225px;
  	border-radius: 50%;
  	background-color: #1a6cba;
  	position: absolute;
  	top: 250px;
  	left: 250px;
  	animation-duration: 52s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#saturn{
  	height: 250px;
  	width: 250px;
  	border-radius: 50%;
  	background-color: #edce55;
  	position: absolute;
  	top: 250px;
  	left: 575px;
  	animation-duration: 42s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#venus{
  	height: 125px;
  	width: 125px;
  	border-radius: 50%;
  	background-color: #dbd287;
    position: absolute;
  	top: 250px;
  	left: 1750px;
  	animation-duration: 20s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#moon{
  	height: 35px;
  	width: 35px;
  	border-radius: 50%;
  	background-color: #ffffff;
  	position: absolute;
  	top: 200px;
  	left: 1470px;
  	animation-duration: 35s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
    
}

#mercury{
  	height: 75px;
  	width: 75px;
  	border-radius: 50%;
    background-color: #c4c09f;
  	position: absolute;
  	top: 250px;
  	left: 2000px;

    /* The animation part: */
  	animation-duration: 30s;
  
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  	transform-origin:3100px 600px;
}

#sun{
  	height: 1200px;
  	width: 1200px;
  	border-radius: 50%;
  	background-color: #ffe300;
  	position: absolute;
  	top: 0px;
  	left: 2500px;
}



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