script.js

document.addEventListener('DOMContentLoaded', () => {
    const rainContainer = document.querySelector('.rain');

    // Function to create a drop
    function createDrop() {
        const drop = document.createElement('div');
        drop.classList.add('drop');
        
        // Randomize position and animation duration
        drop.style.left = Math.random() * 100 + 'vw';
        drop.style.animationDuration = Math.random() * 0.5 + 0.5 + 's';
        drop.style.animationDelay = Math.random() * 2 + 's';
        
        // Append the drop to the container
        rainContainer.appendChild(drop);
        
        // Remove the drop after animation ends
        drop.addEventListener('animationend', () => {
            drop.remove();
        });
    }

    // Create multiple drops
    for (let i = 0; i < 100; i++) {
        createDrop();
    }

    // Create new drops continuously
    setInterval(createDrop, 200);
});