.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: scrollStars linear infinite;
}

.stars-small {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: var(--smallStars);
    animation-duration: var(--smallStarScrollSpeed);
}

.stars-medium {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: var(--mediumStars);
    animation-duration: var(--mediumStarScrollSpeed);
}

.stars-large {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: var(--largeStars);
    animation-duration: var(--largeStarScrollSpeed);
}

.shooting-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    width: 3px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    opacity: 0;
    transform: rotate(-45deg);
    animation: shootingAnimation var(--shootingStarDuration) ease-out;
}

@keyframes scrollStars {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(-100vh) translateX(-100vw);
    }
}

@keyframes shootingAnimation {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: translate(-500px, -500px) rotate(-45deg);
    }
}

.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: scrollStars linear infinite;
}

.stars-small {
    width: 1px;
    height: 1px;
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: var(--smallStars);
    animation-duration: var(--smallStarScrollSpeed);
}

.stars-medium {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: var(--mediumStars);
    animation-duration: var(--mediumStarScrollSpeed);
}

.stars-large {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: var(--largeStars);
    animation-duration: var(--largeStarScrollSpeed);
}

.shooting-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shooting-star {
    position: absolute;
    width: 3px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    opacity: 0;
    transform: rotate(-45deg);
    animation: shootingAnimation var(--shootingStarDuration) ease-out;
}

@keyframes scrollStars {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(-100vh) translateX(-100vw);
    }
}

@keyframes shootingAnimation {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: translate(-500px, -500px) rotate(-45deg);
    }
}