/* style.css */

/*Orbit Animation*/

/*Star pulse animation*/
@-webkit-keyframes starPulse {
    from { opacity: 1;}
    to { opacity: 0.2;}
}

@-moz-keyframes starPulse {
    from { opacity: 1;}
    to { opacity: 0.2;}
}

@keyframes starPulse {
    from { opacity: 1;}
    to { opacity: 0.2;}
}

/* Sun fire animation */
@-webkit-keyframes sunFire {
    from { -webkit-box-shadow: 0 0 50px #f5c91a;
        -moz-box-shadow: 0 0 50px #f5c91a;
        box-shadow: 0 0 50px #f5c91a;}
    to { -webkit-box-shadow: 0 0 100px #f5c91a;
        -moz-box-shadow: 0 0 100px #f5c91a;
        box-shadow: 0 0 100px #f5c91a;}
}

@-moz-keyframes sunFire {
    from { -webkit-box-shadow: 0 0 50px #f5c91a;
        -moz-box-shadow: 0 0 50px #f5c91a;
        box-shadow: 0 0 50px #f5c91a;}
    to { -webkit-box-shadow: 0 0 100px #f5c91a;
        -moz-box-shadow: 0 0 100px #f5c91a;
        box-shadow: 0 0 100px #f5c91a;}
}        

@keyframes sunFire {
    from { -webkit-box-shadow: 0 0 50px #f5c91a;
        -moz-box-shadow: 0 0 50px #f5c91a;
        box-shadow: 0 0 50px #f5c91a;}
    to { -webkit-box-shadow: 0 0 100px #f5c91a;
        -moz-box-shadow: 0 0 100px #f5c91a;
        box-shadow: 0 0 100px #f5c91a;}
}

/* Rotate animation*/
@-webkit-keyframes spin {
    from { transform: rotate(0);}
    to { transform: rotate(360deg);}
}

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

@keyframes spin {
    from { transform: rotate(0);}
    to { transform: rotate(360deg);}
}
html, body {
    height: 100%;
    width: 100%;
}

#universe {
    background: black;
    background: -webkit-radial-gradient(#555, #000);
    background: -moz-radial-gradient(#555, #000);
    background: -o-radial-gradient(#555, #000);
    background: radial-gradient(#555, #000);
}

#stars {
    position: relative;
    z-index: 2; /*Defines layers on which the objects are, the higher the more in the front*/
    height: 100%;
    width: 100%;
    background: url('Images/Stars.png');

    -webkit-animation: starPulse 4s infinite alternate; 
    -moz-animation: starPulse 4s infinite alternate; 
    animation: starPulse 4s infinite alternate; 
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    margin-top: -100px; /*The margin top and left move the sun in the center, before the top left corner was in the center*/
    margin-left: -100px;
    height: 200px;
    width: 200px;

    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;

    background: orange;
    background: -webkit-radial-gradient(#f5c313, #ec7e08);
    background: -moz-radial-gradient(#f5c313, #ec7e08);
    background: -o-radial-gradient(#f5c313, #ec7e08);
    background: radial-gradient(#f5c313, #ec7e08);

    -webkit-box-shadow: 0 0 50px #f5c91a;
    -moz-box-shadow: 0 0 50px #f5c91a;
    box-shadow: 0 0 50px #f5c91a;

    -webkit-animation: sunFire 3s infinite alternate;
    -moz-animation: sunFire 3s infinite alternate;
    animation: sunFire 3s infinite alternate;
    
}

#earthOrbit {

    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;

    height: 700px;
    width: 600px;

    border-radius: 100%;

    -webkit-animation: spin 40s linear infinite;
    -moz-animation: spin 40s linear infinite;
    animation: spin 40s linear infinite;
}

#earth {
    position: absolute;
    top: 50%;
    left: 0;

    margin-top: -40px;

    -webkit-animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}

#moonOrbit {
    height: 120px;
    width: 120px;
    position: absolute;
    z-index: 4;
    top: 50%;
    left: -20px;
    margin-top: -60px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;

    -webkit-animation: spin 4s linear infinite reverse;
    -moz-animation: spin 4s linear infinite reverse;
    animation: spin 4s linear infinite reverse;
}

#moon {
    height: 20px;
    width: 20px;

    background: gray;
    background: radial-gradient(#ddd, #888);

    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%;
    border-radius: 100%;
}