html, body {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', serif;
    scroll-behavior: smooth;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    color: #ff0c0c;
    background-color: #000;
}

.rain div {
    position: absolute;
    width: 2px;
    height: 15px;
    background: #ff0c0c;
    top: -20px;
    animation: fall 1s linear infinite;
}

.rain div:nth-child(1) { left: 10%; animation-delay: 0s; }
.rain div:nth-child(2) { left: 30%; animation-delay: 0.3s; }
.rain div:nth-child(3) { left: 50%; animation-delay: 0.6s; }
.rain div:nth-child(4) { left: 70%; animation-delay: 0.9s; }
.rain div:nth-child(5) { left: 90%; animation-delay: 1.2s; }

@keyframes fall {
    0% { top: -20; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100vh; opacity: 0 }
}