.snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Make snowflakes non-interactive */
    overflow: hidden; /* Hide overflow */
    z-index: 998; /* Ensure snowflakes are above other content */
}

.snowflake {
    position: absolute;
    top: -10%; /* Start above the top of the screen */
    color: white; /* Snowflake color */
    font-size: 1em; /* Size of the snowflake; adjust as needed */
    opacity: 0.5; /* Transparency */
    animation: fall linear infinite; /* Apply the fall animation */
}

/* Falling animation */
@keyframes fall {
    0% {
        transform: translateX(0) translateY(0); /* Start position */
    }
    100% {
        transform: translateX(-5vw) translateY(120vh); /* End position */
        opacity: 0.1; /* Optional: fade out */
    }
}

/* Randomize snowflake size and animation */
.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}

/* Add more child selectors for additional snowflakes */