/*** Reset ****/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**** Style général de la page ****/

body {
    width: 100%;
    height: 100vh;
    background-color: #000000;
    overflow: hidden;
}

div {
    position: absolute;
    height: 200px;
    background-image: linear-gradient(transparent, #ffffff);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    animation: animate 5s linear infinite
}

/**** Animation animate ****/

@keyframes animate {
    0% {
        transform: translateY(-200px);
    }

    100% {
        transform: translateY(calc(100vh + 200px));
    }
}

div:nth-child(3n+1) {
    background-image: linear-gradient(transparent, #00ffff);
}

div:nth-child(3n+2) {
    background-image: linear-gradient(transparent, #ffd700);
}

div:nth-child(3n+3) {
    background-image: linear-gradient(transparent, #ff0000);
}