.sky { pointer-events: none; position: fixed; width: 100%; height: 100%; z-index: -1;}
.stars { pointer-events: none; position: relative; width: 100%; height:
100%; }
.star { position: absolute; background-color: white; border-radius: 50%;  z-index: -1; opacity: 0.8; animation:
twinkle 1.5s infinite alternate; } @keyframes twinkle { 0% { transform: scale(1); } 100% { transform:
scale(1.5); opacity: 0.5; } }
.stars::before { content: ''; position: absolute;  z-index: -1; top: 0;
left: 0; width: 100%; height: 100%; background: radial-gradient(circle, white 1px, transparent 1px);
background-size: 50px 50px; animation: move 20s linear infinite; } @keyframes move { 0% {
background-position: 0 0; } 100% { background-position: 100% 100%; } } /* Create multiple stars */ @for (let
i = 0; i < 100; i++) { .star:nth-child(${i}) { top: ${Math.random() * 100}%; left: ${Math.random() * 100}%;
width: ${Math.random() * 3 + 1}px; height: ${Math.random() * 3 + 1}px; animation-duration: ${Math.random() *
2 + 1}s; } }