.stars-container {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #122547 0%, #31347A 33%, #405199 50%, #6CAEEE 100%);
}

.star {
position: absolute;
background: #ffffff;
border-radius: 50%;
animation: twinkle 2s ease-in-out infinite alternate;
}

.star:nth-child(odd) {
animation-delay: 0.5s;
}

.star:nth-child(3n) {
animation-delay: 1s;
}

.star:nth-child(4n) {
animation-delay: 1.5s;
}

.star:nth-child(5n) {
animation-delay: 0.8s;
}

.star.large {
width: 3px;
height: 3px;
box-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 18px #ffffff;
animation: twinkle 3s ease-in-out infinite alternate, pulse 4s ease-in-out infinite;
}

.star.medium {
width: 2px;
height: 2px;
box-shadow: 0 0 4px #ffffff, 0 0 8px #ffffff;
animation: twinkle 2.5s ease-in-out infinite alternate;
}

.star.small {
width: 1px;
height: 1px;
box-shadow: 0 0 2px #ffffff;
animation: twinkle 2s ease-in-out infinite alternate, float 6s ease-in-out infinite;
}


@keyframes twinkle {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 1; transform: scale(1.2); }
}

@keyframes pulse {
0%, 100% { box-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 18px #ffffff; }
50% { box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff; }
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

@keyframes floatReverse {
0%, 100% { transform: translateY(-10px); }
50% { transform: translateY(10px); }
}

@keyframes floatSlow {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}

@keyframes floatSlower {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}

@keyframes floatMedium {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-30px); }
}