:root {
    --page-height: -1000px;
    --mango-animation-duration: 40s;
}


@keyframes animate {
    0% {
        /* transform: translateY(-5300px) rotate(720deg); */
        transform: translateY(var(--page-height)) rotate(720deg);
        opacity: .6;
        border-radius: 50%;
    }
    
    100% {
        /* transform: translateY( -220px) rotate(0deg); */
        transform: translateY( 200px) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
}

.hide {
    display: none !important;
}

.background {
    position: relative;
    height: 50%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;

}

.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.0);
    animation: animate var(--mango-animation-duration) linear infinite;
}

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

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

.background li:nth-child(3) {
    left: 27%;
    width: 113px;
    height: 113px;
    bottom: -113px;
    animation-delay: 0s;
}

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

.background li:nth-child(5) {
    left: 65%;
    width: 137px;
    height: 137px;
    bottom: -210px;
    animation-delay: 0s;
}




@media only screen and (max-width: 767px) {
    .background li {
        max-width: 25% !important;
    }

    @keyframes animate {
        0% {
            transform: translateY(var(--page-height)) rotate(720deg);
            opacity: .1;
            border-radius: 50%;
        }
        
        100% {
            transform: translateY(0) rotate(0deg);
            opacity: .5;
            border-radius: 0;
        }
    }

}