@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #1e673d;
    overflow: hidden;
}

.background span {
    width: 20vmin;
    height: 20vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #5cd68b;
    top: 1%;
    left: 76%;
    animation-duration: 25s;
    animation-delay: -28s;
    transform-origin: -6vw 23vh;
    box-shadow: -40vmin 0 5.290549816104549vmin currentColor;
}
.background span:nth-child(1) {
    color: #ccd77f;
    top: 98%;
    left: 66%;
    animation-duration: 18s;
    animation-delay: -25s;
    transform-origin: -20vw 1vh;
    box-shadow: -40vmin 0 5.273121692902508vmin currentColor;
}
.background span:nth-child(2) {
    color: #5cd68b;
    top: 40%;
    left: 61%;
    animation-duration: 8s;
    animation-delay: -40s;
    transform-origin: 12vw -16vh;
    box-shadow: -40vmin 0 5.1572146109156325vmin currentColor;
}
.background span:nth-child(3) {
    color: #5cd68b;
    top: 95%;
    left: 24%;
    animation-duration: 42s;
    animation-delay: -20s;
    transform-origin: 18vw -3vh;
    box-shadow: -40vmin 0 5.300840851840549vmin currentColor;
}
.background span:nth-child(4) {
    color: #ccd77f;
    top: 93%;
    left: 7%;
    animation-duration: 48s;
    animation-delay: -44s;
    transform-origin: -11vw 16vh;
    box-shadow: 40vmin 0 5.426368355052901vmin currentColor;
}
.background span:nth-child(5) {
    color: #45d728;
    top: 76%;
    left: 74%;
    animation-duration: 24s;
    animation-delay: -50s;
    transform-origin: 16vw -7vh;
    box-shadow: -40vmin 0 5.949323233535759vmin currentColor;
}
.background span:nth-child(6) {
    color: #45d728;
    top: 84%;
    left: 53%;
    animation-duration: 49s;
    animation-delay: -3s;
    transform-origin: 25vw 5vh;
    box-shadow: 40vmin 0 5.814340796528752vmin currentColor;
}
.background span:nth-child(7) {
    color: #5cd68b;
    top: 58%;
    left: 17%;
    animation-duration: 32s;
    animation-delay: -48s;
    transform-origin: 19vw 3vh;
    box-shadow: 40vmin 0 5.442032757070436vmin currentColor;
}
.background span:nth-child(8) {
    color: #5cd68b;
    top: 70%;
    left: 96%;
    animation-duration: 24s;
    animation-delay: -42s;
    transform-origin: -21vw -14vh;
    box-shadow: 40vmin 0 5.900723786736532vmin currentColor;
}
.background span:nth-child(9) {
    color: #5cd68b;
    top: 92%;
    left: 75%;
    animation-duration: 20s;
    animation-delay: -11s;
    transform-origin: 7vw -10vh;
    box-shadow: -40vmin 0 5.683458122556763vmin currentColor;
}
.background span:nth-child(10) {
    color: #ccd77f;
    top: 51%;
    left: 84%;
    animation-duration: 45s;
    animation-delay: -32s;
    transform-origin: 1vw 12vh;
    box-shadow: -40vmin 0 5.151390804483833vmin currentColor;
}
.background span:nth-child(11) {
    color: #ccd77f;
    top: 75%;
    left: 30%;
    animation-duration: 12s;
    animation-delay: -13s;
    transform-origin: -20vw -18vh;
    box-shadow: 40vmin 0 5.711075366037949vmin currentColor;
}
.background span:nth-child(12) {
    color: #45d728;
    top: 46%;
    left: 95%;
    animation-duration: 55s;
    animation-delay: -15s;
    transform-origin: 21vw -7vh;
    box-shadow: -40vmin 0 5.9826881040801485vmin currentColor;
}
.background span:nth-child(13) {
    color: #ccd77f;
    top: 52%;
    left: 40%;
    animation-duration: 54s;
    animation-delay: -6s;
    transform-origin: -10vw 15vh;
    box-shadow: 40vmin 0 5.347162228350185vmin currentColor;
}
.background span:nth-child(14) {
    color: #ccd77f;
    top: 51%;
    left: 62%;
    animation-duration: 15s;
    animation-delay: -24s;
    transform-origin: -5vw 23vh;
    box-shadow: 40vmin 0 5.241341910294899vmin currentColor;
}
.background span:nth-child(15) {
    color: #ccd77f;
    top: 74%;
    left: 87%;
    animation-duration: 36s;
    animation-delay: -18s;
    transform-origin: -9vw -22vh;
    box-shadow: 40vmin 0 5.574950077825095vmin currentColor;
}
.background span:nth-child(16) {
    color: #45d728;
    top: 93%;
    left: 97%;
    animation-duration: 33s;
    animation-delay: -46s;
    transform-origin: 9vw -6vh;
    box-shadow: 40vmin 0 5.319205002032541vmin currentColor;
}
.background span:nth-child(17) {
    color: #45d728;
    top: 49%;
    left: 62%;
    animation-duration: 25s;
    animation-delay: -20s;
    transform-origin: -19vw 20vh;
    box-shadow: -40vmin 0 5.777244238523127vmin currentColor;
}
.background span:nth-child(18) {
    color: #5cd68b;
    top: 30%;
    left: 79%;
    animation-duration: 44s;
    animation-delay: -12s;
    transform-origin: -17vw 21vh;
    box-shadow: 40vmin 0 5.381586866151197vmin currentColor;
}
.background span:nth-child(19) {
    color: #45d728;
    top: 4%;
    left: 44%;
    animation-duration: 7s;
    animation-delay: -37s;
    transform-origin: 17vw 3vh;
    box-shadow: 40vmin 0 5.5643039683489715vmin currentColor;
}