@keyframes twinkel {
    from {opacity: 1}
    to {opacity:0.2}
}

@keyframes sunFire {
    from {box-shadow: 0 0 50px #f5c91a}
    to {box-shadow: 0 0 100px #f5c91a}
}
@keyframes rotate {
    from {transform: rotate(0)}
    to {transform: rotate(360deg)}
}

html, body {
    width: 100%;
    height: 100%;
    
    background: radial-gradient(#555, #000);
}

#stars {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    
    background-image: url(stars.png);
    animation-name: twinkel;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

#sun {
    position: absolute;
    z-index:2;
    width: 200px;
    height: 200px;
    background: radial-gradient(#f5c313, #ec7e08);
    border-radius: 100px;
    top: 50%;
    left:50%;
    margin-top: -100px;
    margin-left: -100px;
    box-shadow: 0 0 50px #f5c91a;
    animation-name: sunFire;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

#earthOrbit {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -250px;
    border-radius: 100%;
    border: solid 0px red;
    height: 600px;
    width: 500px;
    animation-name: rotate;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#earth {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -40px;
}
#moonOrbit {
    position: absolute;
    border:solid 0px red;
    width:120px;
    height:120px;
    top:50%;
    left: -20px;
    margin-top: -60px;
    border-radius: 100%;
    animation-name: rotate;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}
#moon {
    width:20px;
    height:20px;
    background: radial-gradient(#ddd,#888);
    border-radius: 100%;
}