html, body {
/* The universe takes up all available space */
width: 100%;
height: 100%;
/* The universe is black */
/*background-image:url('http://goo.gl/ty1O7r');*/
background-color: black;
}
.header .nav{
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;
/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
border-color: orange;
border-width: 0px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 900px orange;
-webkit-animation: spin-right 100s linear infinite;
-moz-animation: spin-right 100s linear infinite;
-ms-animation: spin-right 100s linear infinite;
-o-animation: spin-right 100s linear infinite;
animation: spin-right 100s linear infinite;
}
#mercuary-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 210px;
height: 210px;
margin-top: -106px;
margin-left: -106px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 7s linear infinite;
-moz-animation: spin-right 7s linear infinite;
-ms-animation: spin-right 7s linear infinite;
-o-animation: spin-right 7s linear infinite;
animation: spin-right 7s linear infinite;
}
#mercuary {
/* Style your earth */
position: absolute;
top: 50%;
left: 10%;
height: 10px;
width: 10px;
margin-left: -25px;
margin-top: -25px;
border-color: brown;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 10px white;
}
#venus-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 245px;
height: 245px;
margin-top: -125px;
margin-left: -125px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 9s linear infinite;
-moz-animation: spin-right 9s linear infinite;
-ms-animation: spin-right 9s linear infinite;
-o-animation: spin-right 9s linear infinite;
animation: spin-right 9s linear infinite;
}
#venus {
/* Style your earth */
position: absolute;
top: 50%;
left: 5%;
height: 25px;
width: 25px;
margin-left: -25px;
margin-top: -25px;
border-color: brown;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 10px yellow;
}
#earth-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 310px;
height: 310px;
margin-top: -159px;
margin-left: -159px;
border-width: 0px;
border-style: solid;
border-color: 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;
}
#earth {
/* Style your earth */
position: absolute;
top: 50%;
left: 5%;
height: 27px;
width: 27px;
margin-left: -25px;
margin-top: -25px;
border-color: green;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 10px white;
}
#moon-orbit{
position: absolute;
top: 90%;
left: 45%;
width: 55px;
height: 55px;
margin-top: -159px;
margin-left: -159px;
border-width: 0px;
border-style: solid;
border-color: 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;
}
#moon{
position: absolute;
top: 50%;
left: 5%;
height: 4px;
width: 4px;
margin-left: 5px;
margin-top: 5px;
-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;
}
#mars-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
margin-top: -178px;
margin-left: -178px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 12s linear infinite;
-moz-animation: spin-right 12s linear infinite;
-ms-animation: spin-right 12s linear infinite;
-o-animation: spin-right 12s linear infinite;
animation: spin-right 12s linear infinite;
}
#mars {
/* Style your earth */
position: absolute;
top: 50%;
left: 5%;
height: 18px;
width: 18px;
margin-left: -25px;
margin-top: -25px;
border-color: red;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 10px red;
}
#jupiter-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 15s linear infinite;
-moz-animation: spin-right 15s linear infinite;
-ms-animation: spin-right 15s linear infinite;
-o-animation: spin-right 15s linear infinite;
animation: spin-right 15s linear infinite;
}
#jupiter {
/* Style your earth */
position: absolute;
top: 50%;
left: -2%;
height: 100px;
width: 100px;
margin-left: -25px;
margin-top: -25px;
-webkit-animation: spin-right 30s linear infinite;
-moz-animation: spin-right 30s linear infinite;
-ms-animation: spin-right 30s linear infinite;
-o-animation: spin-right 30s linear infinite;
animation: spin-right 30s linear infinite;
}
#io-orbit{
position: absolute;
top: 75%;
left: 24%;
width: 80px;
height: 80px;
margin-top: -160px;
margin-left: -160px;
border-width: 0px;
border-style: solid;
border-color: 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;
}
#io{
height: 8px;
width: 8px;
}
#saturn-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 650px;
height: 650px;
margin-top: -360px;
margin-left: -360px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
}
#saturn {
/* Style your earth */
position: absolute;
top: 50%;
left: -13%;
height: 80px;
width: 160px;
margin-left: -25px;
margin-top: -25px;
-webkit-animation: spin-right 30s linear infinite;
-moz-animation: spin-right 30s linear infinite;
-ms-animation: spin-right 30s linear infinite;
-o-animation: spin-right 30s linear infinite;
animation: spin-right 30s 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);
}
}