@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 {
    background-image: url("bg.jpg");
    background-size: cover;
    z-index: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 6s linear infinite;
}




.background li:nth-child(0) {
    left: 67%;
    width: 66px;
    height: 66px;
    bottom: -66px;
    animation-delay: 1s;
}
.background li:nth-child(1) {
    left: 88%;
    width: 60px;
    height: 60px;
    bottom: -60px;
    animation-delay: 4s;
}
.background li:nth-child(2) {
    left: 82%;
    width: 70px;
    height: 70px;
    bottom: -70px;
    animation-delay: 6s;
}
.background li:nth-child(3) {
    left: 65%;
    width: 71px;
    height: 71px;
    bottom: -71px;
    animation-delay: 3s;
}
.background li:nth-child(4) {
    left: 3%;
    width: 53px;
    height: 53px;
    bottom: -53px;
    animation-delay: 2s;
}
.background li:nth-child(5) {
    left: 77%;
    width: 68px;
    height: 68px;
    bottom: -68px;
    animation-delay: 21s;
}
.background li:nth-child(6) {
    left: 32%;
    width: 78px;
    height: 78px;
    bottom: -78px;
    animation-delay: 7s;
}
.background li:nth-child(7) {
    left: 31%;
    width: 74px;
    height: 74px;
    bottom: -74px;
    animation-delay: 2s;
}
.background li:nth-child(8) {
    left: 51%;
    width: 77px;
    height: 77px;
    bottom: -77px;
    animation-delay: 14s;
}
.background li:nth-child(9) {
    left: 36%;
    width: 70px;
    height: 70px;
    bottom: -70px;
    animation-delay: 14s;
}
.background li:nth-child(10) {
    left: 15%;
    width: 76px;
    height: 76px;
    bottom: -76px;
    animation-delay: 34s;
}
.background li:nth-child(11) {
    left: 65%;
    width: 79px;
    height: 79px;
    bottom: -79px;
    animation-delay: 36s;
}
.background li:nth-child(12) {
    left: 22%;
    width: 62px;
    height: 62px;
    bottom: -62px;
    animation-delay: 30s;
}
.background li:nth-child(13) {
    left: 8%;
    width: 78px;
    height: 78px;
    bottom: -78px;
    animation-delay: 33s;
}
.background li:nth-child(14) {
    left: 88%;
    width: 61px;
    height: 61px;
    bottom: -61px;
    animation-delay: 62s;
}
.background li:nth-child(15) {
    left: 80%;
    width: 72px;
    height: 72px;
    bottom: -72px;
    animation-delay: 3s;
}
.background li:nth-child(16) {
    left: 23%;
    width: 60px;
    height: 60px;
    bottom: -60px;
    animation-delay: 72s;
}
.background li:nth-child(17) {
    left: 11%;
    width: 61px;
    height: 61px;
    bottom: -61px;
    animation-delay: 3s;
}
.background li:nth-child(18) {
    left: 60%;
    width: 75px;
    height: 75px;
    bottom: -75px;
    animation-delay: 1s;
}
.background li:nth-child(19) {
    left: 18%;
    width: 79px;
    height: 79px;
    bottom: -79px;
    animation-delay: 42s;
}
.background li:nth-child(20) {
    left: 56%;
    width: 58px;
    height: 58px;
    bottom: -58px;
    animation-delay: 16s;
}
.background li:nth-child(21) {
    left: 37%;
    width: 65px;
    height: 65px;
    bottom: -65px;
    animation-delay: 73s;
}
.background li:nth-child(22) {
    left: 78%;
    width: 58px;
    height: 58px;
    bottom: -58px;
    animation-delay: 13s;
}
.background li:nth-child(23) {
    left: 79%;
    width: 74px;
    height: 74px;
    bottom: -74px;
    animation-delay: 108s;
}
.background li:nth-child(24) {
    left: 30%;
    width: 73px;
    height: 73px;
    bottom: -73px;
    animation-delay: 19s;
}
.background li:nth-child(25) {
    left: 59%;
    width: 54px;
    height: 54px;
    bottom: -54px;
    animation-delay: 75s;
}
.background li:nth-child(26) {
    left: 69%;
    width: 76px;
    height: 76px;
    bottom: -76px;
    animation-delay: 87s;
}
.background li:nth-child(27) {
    left: 62%;
    width: 63px;
    height: 63px;
    bottom: -63px;
    animation-delay: 5s;
}
.background li:nth-child(28) {
    left: 12%;
    width: 71px;
    height: 71px;
    bottom: -71px;
    animation-delay: 126s;
}
.background li:nth-child(29) {
    left: 30%;
    width: 65px;
    height: 65px;
    bottom: -65px;
    animation-delay: 37s;
}
.background li:nth-child(30) {
    left: 77%;
    width: 73px;
    height: 73px;
    bottom: -73px;
    animation-delay: 30s;
}
.background li:nth-child(31) {
    left: 38%;
    width: 72px;
    height: 72px;
    bottom: -72px;
    animation-delay: 60s;
}
.background li:nth-child(32) {
    left: 27%;
    width: 68px;
    height: 68px;
    bottom: -68px;
    animation-delay: 65s;
}
.background li:nth-child(33) {
    left: 72%;
    width: 59px;
    height: 59px;
    bottom: -59px;
    animation-delay: 99s;
}
.background li:nth-child(34) {
    left: 15%;
    width: 57px;
    height: 57px;
    bottom: -57px;
    animation-delay: 12s;
}
.background li:nth-child(35) {
    left: 20%;
    width: 56px;
    height: 56px;
    bottom: -56px;
    animation-delay: 168s;
}
.background li:nth-child(36) {
    left: 45%;
    width: 63px;
    height: 63px;
    bottom: -63px;
    animation-delay: 6s;
}
.background li:nth-child(37) {
    left: 37%;
    width: 79px;
    height: 79px;
    bottom: -79px;
    animation-delay: 93s;
}
.background li:nth-child(38) {
    left: 23%;
    width: 74px;
    height: 74px;
    bottom: -74px;
    animation-delay: 151s;
}