body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

.rain {
    position: relative;
    width: 100%;
    height: 100%;
}

.drop {
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: #ffffff; /* Start with red */
    animation: dropFall 2s linear infinite, colorChange 2s linear infinite;
}

@keyframes dropFall {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes colorChange {
    0% {
        background-color: #ff0000; /* Red */
    }
    20% {
        background-color: #ffff00; /* Yellow */
    }
    40% {
        background-color: #00ff00; /* Green */
    }
    60% {
        background-color: #00ffff; /* Cyan */
    }
    80% {
        background-color: #0000ff; /* Blue */
    }
    100% {
        background-color: #ff00ff; /* Magenta */
    }
}