@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 {
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #fc7f00;
    overflow: hidden;
}

    .background li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(252, 127, 0, 0.2);
        animation: animate 14s linear infinite;
    }




        .background li:nth-child(0) {
            left: 2%;
            width: 184px;
            height: 184px;
            bottom: -184px;
            animation-delay: 1s;
        }

        .background li:nth-child(1) {
            left: 45%;
            width: 170px;
            height: 170px;
            bottom: -170px;
            animation-delay: 1s;
        }

        .background li:nth-child(2) {
            left: 78%;
            width: 126px;
            height: 126px;
            bottom: -126px;
            animation-delay: 9s;
        }

        .background li:nth-child(3) {
            left: 15%;
            width: 156px;
            height: 156px;
            bottom: -156px;
            animation-delay: 2s;
        }

        .background li:nth-child(4) {
            left: 49%;
            width: 161px;
            height: 161px;
            bottom: -161px;
            animation-delay: 12s;
        }

        .background li:nth-child(5) {
            left: 34%;
            width: 117px;
            height: 117px;
            bottom: -117px;
            animation-delay: 13s;
        }

        .background li:nth-child(6) {
            left: 52%;
            width: 108px;
            height: 108px;
            bottom: -108px;
            animation-delay: 7s;
        }

        .background li:nth-child(7) {
            left: 36%;
            width: 184px;
            height: 184px;
            bottom: -184px;
            animation-delay: 29s;
        }

        .background li:nth-child(8) {
            left: 81%;
            width: 172px;
            height: 172px;
            bottom: -172px;
            animation-delay: 8s;
        }

        .background li:nth-child(9) {
            left: 5%;
            width: 150px;
            height: 150px;
            bottom: -150px;
            animation-delay: 8s;
        }

        .background li:nth-child(10) {
            left: 21%;
            width: 104px;
            height: 104px;
            bottom: -104px;
            animation-delay: 29s;
        }

        .background li:nth-child(11) {
            left: 52%;
            width: 193px;
            height: 193px;
            bottom: -193px;
            animation-delay: 4s;
        }

        .background li:nth-child(12) {
            left: 73%;
            width: 187px;
            height: 187px;
            bottom: -187px;
            animation-delay: 14s;
        }

        .background li:nth-child(13) {
            left: 46%;
            width: 166px;
            height: 166px;
            bottom: -166px;
            animation-delay: 10s;
        }

        .background li:nth-child(14) {
            left: 42%;
            width: 143px;
            height: 143px;
            bottom: -143px;
            animation-delay: 16s;
        }

        .background li:nth-child(15) {
            left: 68%;
            width: 199px;
            height: 199px;
            bottom: -199px;
            animation-delay: 10s;
        }

        .background li:nth-child(16) {
            left: 32%;
            width: 144px;
            height: 144px;
            bottom: -144px;
            animation-delay: 43s;
        }

        .background li:nth-child(17) {
            left: 4%;
            width: 134px;
            height: 134px;
            bottom: -134px;
            animation-delay: 77s;
        }

        .background li:nth-child(18) {
            left: 68%;
            width: 145px;
            height: 145px;
            bottom: -145px;
            animation-delay: 68s;
        }

        .background li:nth-child(19) {
            left: 15%;
            width: 179px;
            height: 179px;
            bottom: -179px;
            animation-delay: 52s;
        }

        .background li:nth-child(20) {
            left: 0%;
            width: 154px;
            height: 154px;
            bottom: -154px;
            animation-delay: 17s;
        }

        .background li:nth-child(21) {
            left: 52%;
            width: 152px;
            height: 152px;
            bottom: -152px;
            animation-delay: 23s;
        }

        .background li:nth-child(22) {
            left: 72%;
            width: 146px;
            height: 146px;
            bottom: -146px;
            animation-delay: 99s;
        }

        .background li:nth-child(23) {
            left: 44%;
            width: 105px;
            height: 105px;
            bottom: -105px;
            animation-delay: 16s;
        }

        .background li:nth-child(24) {
            left: 59%;
            width: 115px;
            height: 115px;
            bottom: -115px;
            animation-delay: 97s;
        }

        .background li:nth-child(25) {
            left: 31%;
            width: 106px;
            height: 106px;
            bottom: -106px;
            animation-delay: 108s;
        }