body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    background-color: black; /* Fondo negro */
}

.starfield {
    position: relative;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    border-radius: 50%;
    background-color: gold; /* Color dorado para las estrellas */
    opacity: 0.8; /* Opacidad de las estrellas */
    animation: twinkle 1.5s infinite alternate; /* Animación de parpadeo */
}

@keyframes twinkle {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.5);
    }
}

/* Generar estrellas en diferentes posiciones */
.stars {
    --star-count: 100; /* Número de estrellas */
}

.stars:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@for $i from 1 through var(--star-count) {
    .stars:before {
        content: '';
        top: calc(100% * random());
        left: calc(100% * random());
        width: 5px;
        height: 5px;
        animation-delay: random() * 1.5s; /* Retraso aleatorio para cada estrella */
    }
}