.moon-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Always behind everything */
}

.moon {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 50vw; /* Adjust size as needed */
    height: auto;
    opacity: 0.3;
    filter: brightness(1.1);
    /* Optional: Add a soft shadow to the moon itself */
}

.moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120vw; /* Adjust glow size */
    height: 200vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    z-index: -2;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .moon {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 55vw; /* Adjust size as needed */
        height: auto;
        opacity: 1;
        filter: brightness(1.1);
        /* Optional: Add a soft shadow to the moon itself */
    }
    .moon-glow {
        display: none;
    }
    .moon-move-down .moon {
        transform: translate(-50%, 47%);
        transition: transform 0.5s ease;
    }

}