Nieve en el encabezado

/* Encabezado con fondo por defecto */
header {
    color: white; /* Color de texto por defecto */
    padding: 40px 0; /* Espaciado superior e inferior */
    position: relative; /* Necesario para colocar los copos de nieve */
    width: 100%; /* Asegura que el encabezado cubra todo el ancho */
    margin: 0; /* Elimina márgenes */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño */
}

/* Decoración de nieve en todo el encabezado */
@keyframes caerNieve {
    0% {
        top: -20px;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Nieve flotante en todo el encabezado */
header::before, header::after, header .nieve {
    content: '❄️';
    font-size: 2em;
    position: absolute;
    animation: caerNieve 5s linear infinite;
    pointer-events: none;
}

/* Más copos de nieve con diferentes posiciones y tiempos */
header::before {
    left: 10%;
    animation: caerNieve 5s linear infinite;
}

header::after {
    right: 10%;
    animation: caerNieve 6s linear infinite;
}

header .nieve:nth-child(1) {
    left: 15%;
    animation: caerNieve 5s linear infinite;
}

header .nieve:nth-child(2) {
    left: 25%;
    animation: caerNieve 6s linear infinite;
}

header .nieve:nth-child(3) {
    left: 35%;
    animation: caerNieve 4s linear infinite;
}

header .nieve:nth-child(4) {
    left: 45%;
    animation: caerNieve 5s linear infinite;
}

header .nieve:nth-child(5) {
    left: 55%;
    animation: caerNieve 6s linear infinite;
}

header .nieve:nth-child(6) {
    left: 65%;
    animation: caerNieve 7s linear infinite;
}

header .nieve:nth-child(7) {
    left: 75%;
    animation: caerNieve 8s linear infinite;
}

header .nieve:nth-child(8) {
    left: 85%;
    animation: caerNieve 6s linear infinite;
}

/* Estrella fugaz en el centro */
@keyframes estrellaFugaz {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(100px) translateY(-100px) scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: translateX(200px) translateY(-200px) scale(1);
        opacity: 0;
    }
}

/* Estrella fugaz */
header .estrella-fugaz {
    content: '⭐';
    font-size: 3em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: estrellaFugaz 2s ease-in-out infinite;
    pointer-events: none;
}