* {
    margin: 0px;
    padding: 0px;
    box-sizing: inherit;
}

html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    background-image: linear-gradient(30deg, #182C51, #09101e);
    overflow: hidden;
}

.moon {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    position: relative;
    background-image: linear-gradient(30deg, #13223f, #0e1a30);
}

.moon::before {
    content: "";
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    animation: 3.2s eclipse-animation linear infinite alternate;
}

@keyframes eclipse-animation {
    0% {
        box-shadow: none;
        transform: translate(-30px, 30px) scale(0.9);
    }

    50% {
        box-shadow: 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B;
        transform: translate(0px, 0px) scale(1.02);
        background-color: #efdbd8;
    }

    100% {
        transform: translate(30px, -30px) scale(0.9);
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .moon {
        width: 160px;
        height: 160px;
    }
}