* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    animation: back 15s linear infinite;
}
.eclipse {
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translate(-50%, -500%);
    width: 150px;
    height: 150px;
}
.eclipse .sun {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffad00;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 4px #ffad00;
    animation: sun 15s ease-in-out infinite;
}
.eclipse .moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    margin: -73px;
    animation: movemoon 15s linear infinite;
}
@keyframes movemoon {
    0% {
        transform: translateX(200px);
        background: #fff;
    }
    50% {
        transform: translateX(0px);
        background: #000;
    }
    100% {
        transform: translateX(-200px);
        background: #fff;
    }
}
@keyframes back {
    0%, 100% {
        background: #fff;
    }
    50% {
        background: #000;
    }
}
@keyframes sun {
    50% {
        box-shadow: 0px 0px 20px 4px #ffad00;
    }
}

/* Responsive */
@media (min-width: 1920px) {
    .eclipse {
        top: 150%;
    }
}
  
/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {
    .eclipse {
        top: 150%;
    }
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .eclipse {
        top: 80%;
    }
}

/* small mobile :320px. */
@media (max-width: 767px) {
    .eclipse {
        top: 80%;
    }
}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .eclipse {
        top: 80%;
    }
}

/* Mobile version */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .eclipse {
        top: 80%;
    }
<<<<<<< Updated upstream
}
=======
}
>>>>>>> Stashed changes