* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100vh;
    background-image: url(espacio.jpg);
    background-size: cover;
}

.earth {
    width: 300px;
    height: 300px;
    background-image: url(earth3.jpg);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-size: 900px 100%;
    box-shadow: inset 0px 0px 5px #FDFfF29E,
                inset 30px 0px 50px #000;
    animation: rotate 10s infinite linear;
}

@keyframes rotate {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: 1000px;
    }
}

.orbit {
    width: 500px;
    height: 500px;
    border: 1px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    animation: rotate-2 20s infinite linear;
}

@keyframes rotate-2 {
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

.moon {
    width: 120px;
    height: 120px;
    background: url(moon.png);
    background-size: 120px;
    background-position-x: center;
    border-radius: 50%;
    position: absolute;
    top: 30px;
}