/* CSS to ensure the rain effect works across the entire website */
 body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    
}

/* Create the rain container that covers the whole screen */
.rain {
    position: fixed; /* Makes sure the rain is fixed on the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Prevents the rain from interfering with any interactions */
    z-index: 9999; /* Ensures rain stays above other content */
    overflow: hidden;
}

/* Individual raindrops styling */
.rain-drop {
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* White raindrops */
    animation: fall 1.5s linear infinite; /* Animation to make them fall */
}

/* Keyframe animation for the raindrops to fall */
@keyframes fall {
    0% {
        transform: translateY(-100vh); /* Start above the screen */
    }
    100% {
        transform: translateY(100vh); /* End below the screen */
    }
}

/* Randomize each raindrop's speed and position */
.rain-drop:nth-child(odd) {
    animation-duration: 1.2s; /* Slightly faster for odd drops */
}

.rain-drop:nth-child(even) {
    animation-duration: 1.5s; /* Slightly slower for even drops */
}