/* Ensure the snowflakes are on top and don't interfere with clicks */
.snowflake {
    color: #fff; /* White snow */
    position: fixed;
    top: -10px; /* Start slightly above the viewport */
    pointer-events: none; /* Allows clicking through the snow */
    z-index: 9999; /* Ensure it's above all content */
    
    /* Animation definition */
    animation-name: fall, sway; 
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Define the vertical falling animation */
@keyframes fall {
    to {
        transform: translateY(100vh); /* Move from top to bottom of viewport */
    }
}

/* Define the horizontal swaying motion */
@keyframes sway {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); } /* Sway to the right */
    100% { transform: translateX(0); } /* Sway back */
}