welcome_Stars.css

/* General styling for stars */
.star {
    height: 3px;
    width: 3px;
    background-color: white;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
    filter: blur(0px);
    will-change: transform, box-shadow;
    animation: randomMove linear infinite;
    z-index: 0;
    opacity: 0.8;
}

/* Constrained random movement animation (optimized) */
@keyframes randomMove {
    0% {
        transform: translate(0, 0); /* Start at current position */
    }
    25% {
        transform: translate(5vw, 8vh); /* Move within the screen area */
    }
    50% {
        transform: translate(-5vw, -8vh); /* Move back in the opposite direction */
    }
    75% {
        transform: translate(3vw, -6vh); /* Slight movement up and right */
    }
    100% {
        transform: translate(0, 0); /* Return to the original position */
    }
}

/* Glow effect for stars */
/* @keyframes glow {
    0% {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5),
        0px 0px 30px rgba(255, 255, 255, 0.2),
        0px 0px 40px rgba(255, 255, 255, 0.2),
        0px 0px 60px rgba(255, 255, 255, 0.2),
        0px 0px 70px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0px 0px 30px rgba(255, 255, 255, 1),
        0px 0px 40px rgba(255, 255, 255, 0.8),
        0px 0px 50px rgba(255, 255, 255, 0.2),
        0px 0px 60px rgba(255, 255, 255, 0.2),
        0px 0px 70px rgba(255, 255, 255, 0.2),
        0px 0px 80px rgba(255, 255, 255, 0.2);
    }
} */
@media (max-width: 654px) {
    .star {
        animation: none;
        display: none;
    }
}