@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #613583;
    overflow: hidden;
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 21s linear infinite;
}




.background li:nth-child(0) {
    left: 43%;
    width: 261px;
    height: 261px;
    bottom: -261px;
    animation-delay: 1s;
}
.background li:nth-child(1) {
    left: 23%;
    width: 339px;
    height: 339px;
    bottom: -339px;
    animation-delay: 3s;
}
.background li:nth-child(2) {
    left: 6%;
    width: 329px;
    height: 329px;
    bottom: -329px;
    animation-delay: 9s;
}
.background li:nth-child(3) {
    left: 31%;
    width: 218px;
    height: 218px;
    bottom: -218px;
    animation-delay: 1s;
}
.background li:nth-child(4) {
    left: 9%;
    width: 191px;
    height: 191px;
    bottom: -191px;
    animation-delay: 19s;
}
.background li:nth-child(5) {
    left: 76%;
    width: 113px;
    height: 113px;
    bottom: -113px;
    animation-delay: 17s;
}
.background li:nth-child(6) {
    left: 74%;
    width: 230px;
    height: 230px;
    bottom: -230px;
    animation-delay: 5s;
}
.background li:nth-child(7) {
    left: 7%;
    width: 140px;
    height: 140px;
    bottom: -140px;
    animation-delay: 35s;
}
.background li:nth-child(8) {
    left: 17%;
    width: 334px;
    height: 334px;
    bottom: -334px;
    animation-delay: 30s;
}
.background li:nth-child(9) {
    left: 50%;
    width: 250px;
    height: 250px;
    bottom: -250px;
    animation-delay: 12s;
}
.background li:nth-child(10) {
    left: 0%;
    width: 253px;
    height: 253px;
    bottom: -253px;
    animation-delay: 16s;
}
.background li:nth-child(11) {
    left: 54%;
    width: 336px;
    height: 336px;
    bottom: -336px;
    animation-delay: 28s;
}
.background li:nth-child(12) {
    left: 35%;
    width: 318px;
    height: 318px;
    bottom: -318px;
    animation-delay: 26s;
}
.background li:nth-child(13) {
    left: 39%;
    width: 335px;
    height: 335px;
    bottom: -335px;
    animation-delay: 13s;
}
.background li:nth-child(14) {
    left: 15%;
    width: 176px;
    height: 176px;
    bottom: -176px;
    animation-delay: 54s;
}
.background li:nth-child(15) {
    left: 14%;
    width: 131px;
    height: 131px;
    bottom: -131px;
    animation-delay: 6s;
}
.background li:nth-child(16) {
    left: 2%;
    width: 288px;
    height: 288px;
    bottom: -288px;
    animation-delay: 50s;
}
.background li:nth-child(17) {
    left: 11%;
    width: 117px;
    height: 117px;
    bottom: -117px;
    animation-delay: 48s;
}
.background li:nth-child(18) {
    left: 15%;
    width: 171px;
    height: 171px;
    bottom: -171px;
    animation-delay: 61s;
}
.background li:nth-child(19) {
    left: 88%;
    width: 284px;
    height: 284px;
    bottom: -284px;
    animation-delay: 92s;
}