/* Aggiungi il contenitore sky per l'effetto stelle */
.sky {
    position: fixed; /* Fissa il contenitore in modo che rimanga visibile mentre si scorrono i contenuti */
    top: 0;
    left: 0;
    width: 100%; /* Larghezza della finestra */
    height: 100%; /* Altezza della finestra */
    overflow: hidden; /* Nascondi gli elementi che escono dal contenitore */
    pointer-events: none; /* Impedisce che l'interazione utente interferisca con il contenuto */
}

/* Le stelle - distribuite su tutta la pagina */
.star {
    position: absolute;
    width: 6px; /* Dimensione delle stelle */
    height: 6px;
    background: #f3cb11; /* Colore delle stelle */
    border-radius: 50%; /* Forma rotonda */
    opacity: 0;
    animation: twinkle 3s infinite ease-in-out;
}

/* Animazione del brillamento delle stelle */
@keyframes twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Stelle distribuite su tutta la pagina con posizioni casuali utilizzando la pseudo-classe nth-child */
.star:nth-child(1) {
    top: 10%; left: 30%;
    animation-delay: 0.5s;
}
.star:nth-child(2) {
    top: 25%; left: 70%;
    animation-delay: 1s;
}
.star:nth-child(3) {
    top: 50%; left: 20%;
    animation-delay: 1.5s;
}
.star:nth-child(4) {
    top: 70%; left: 80%;
    animation-delay: 2s;
}
.star:nth-child(5) {
    top: 85%; left: 40%;
    animation-delay: 2.5s;
}

/* Aggiungi altre stelle con posizioni diverse */
.star:nth-child(6) {
    top: 30%; left: 80%;
    animation-delay: 3s;
}
.star:nth-child(7) {
    top: 40%; left: 50%;
    animation-delay: 3.5s;
}
.star:nth-child(8) {
    top: 60%; left: 10%;
    animation-delay: 4s;
}
/* Aggiungi altre stelle fino al numero desiderato */

/* Media query per dispositivi più piccoli (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .star {
        width: 5px;
        height: 5px;
    }

    /* Possibile modifica nella posizione delle stelle */
    .star:nth-child(1) {
        top: 15%; left: 35%;
    }
    .star:nth-child(2) {
        top: 30%; left: 75%;
    }
    /* Continuare per le altre stelle */
}

/* Media query per dispositivi ancora più piccoli (max-width: 768px) */
@media screen and (max-width: 768px) {
    .star {
        width: 4px;
        height: 4px;
    }

    /* Possibile modifica nella posizione delle stelle */
    .star:nth-child(1) {
        top: 20%; left: 40%;
    }
    .star:nth-child(2) {
        top: 35%; left: 80%;
    }
    /* Continuare per le altre stelle */
}

/* Media query per dispositivi molto piccoli (max-width: 480px) */
@media screen and (max-width: 480px) {
    .star {
        width: 3px;
        height: 3px;
    }

    /* Possibile modifica nella posizione delle stelle */
    .star:nth-child(1) {
        top: 25%; left: 45%;
    }
    .star:nth-child(2) {
        top: 40%; left: 85%;
    }
    /* Continuare per le altre stelle */
}