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

.background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #2d3047;
    overflow: hidden;
}

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


.background span:nth-child(0) {
    color: #ffebd6;
    top: 67%;
    left: 60%;
    animation-duration: 65s;
    animation-delay: -121s;
    transform-origin: -6vw 15vh;
    box-shadow: -40vmin 0 5.39921199887512vmin currentColor;
}
.background span:nth-child(1) {
    color: #ffebd6;
    top: 88%;
    left: 19%;
    animation-duration: 47s;
    animation-delay: -9s;
    transform-origin: -15vw -16vh;
    box-shadow: 40vmin 0 5.435730036298367vmin currentColor;
}
.background span:nth-child(2) {
    color: #ffebd6;
    top: 73%;
    left: 74%;
    animation-duration: 77s;
    animation-delay: -87s;
    transform-origin: 6vw -24vh;
    box-shadow: -40vmin 0 5.137806265002833vmin currentColor;
}
.background span:nth-child(3) {
    color: #ffebd6;
    top: 21%;
    left: 84%;
    animation-duration: 132s;
    animation-delay: -97s;
    transform-origin: -3vw -13vh;
    box-shadow: -40vmin 0 5.763038107020704vmin currentColor;
}
.background span:nth-child(4) {
    color: #97d8b2;
    top: 45%;
    left: 100%;
    animation-duration: 38s;
    animation-delay: -77s;
    transform-origin: -5vw 20vh;
    box-shadow: -40vmin 0 5.957543548065649vmin currentColor;
}
.background span:nth-child(5) {
    color: #e6b575;
    top: 33%;
    left: 43%;
    animation-duration: 17s;
    animation-delay: -47s;
    transform-origin: -4vw -19vh;
    box-shadow: -40vmin 0 5.261845375328872vmin currentColor;
}
.background span:nth-child(6) {
    color: #97d8b2;
    top: 65%;
    left: 65%;
    animation-duration: 70s;
    animation-delay: -127s;
    transform-origin: -3vw 5vh;
    box-shadow: 40vmin 0 5.618611623920184vmin currentColor;
}
.background span:nth-child(7) {
    color: #97d8b2;
    top: 96%;
    left: 99%;
    animation-duration: 134s;
    animation-delay: -56s;
    transform-origin: 13vw -3vh;
    box-shadow: 40vmin 0 5.001162966986868vmin currentColor;
}
.background span:nth-child(8) {
    color: #e6b575;
    top: 51%;
    left: 35%;
    animation-duration: 41s;
    animation-delay: -47s;
    transform-origin: 10vw 0vh;
    box-shadow: -40vmin 0 5.706436691120741vmin currentColor;
}
.background span:nth-child(9) {
    color: #97d8b2;
    top: 73%;
    left: 68%;
    animation-duration: 11s;
    animation-delay: -48s;
    transform-origin: 21vw -23vh;
    box-shadow: 40vmin 0 5.406484907077162vmin currentColor;
}
.background span:nth-child(10) {
    color: #ffebd6;
    top: 52%;
    left: 37%;
    animation-duration: 100s;
    animation-delay: -35s;
    transform-origin: -12vw 10vh;
    box-shadow: 40vmin 0 5.273020718717233vmin currentColor;
}
.background span:nth-child(11) {
    color: #97d8b2;
    top: 96%;
    left: 77%;
    animation-duration: 106s;
    animation-delay: -54s;
    transform-origin: 9vw -13vh;
    box-shadow: 40vmin 0 5.5152167174467035vmin currentColor;
}
.background span:nth-child(12) {
    color: #e6b575;
    top: 37%;
    left: 10%;
    animation-duration: 6s;
    animation-delay: -23s;
    transform-origin: 11vw 24vh;
    box-shadow: -40vmin 0 5.704495373207507vmin currentColor;
}
.background span:nth-child(13) {
    color: #97d8b2;
    top: 98%;
    left: 29%;
    animation-duration: 62s;
    animation-delay: -24s;
    transform-origin: 17vw 10vh;
    box-shadow: 40vmin 0 5.95240945426063vmin currentColor;
}
.background span:nth-child(14) {
    color: #ffebd6;
    top: 94%;
    left: 82%;
    animation-duration: 6s;
    animation-delay: -130s;
    transform-origin: -20vw -4vh;
    box-shadow: -40vmin 0 5.962666811858629vmin currentColor;
}
.background span:nth-child(15) {
    color: #ffebd6;
    top: 52%;
    left: 65%;
    animation-duration: 40s;
    animation-delay: -129s;
    transform-origin: 14vw 2vh;
    box-shadow: -40vmin 0 5.8828758766563976vmin currentColor;
}
.background span:nth-child(16) {
    color: #97d8b2;
    top: 61%;
    left: 40%;
    animation-duration: 77s;
    animation-delay: -57s;
    transform-origin: -5vw 10vh;
    box-shadow: -40vmin 0 5.20119320062989vmin currentColor;
}
.background span:nth-child(17) {
    color: #ffebd6;
    top: 30%;
    left: 66%;
    animation-duration: 111s;
    animation-delay: -64s;
    transform-origin: -13vw -10vh;
    box-shadow: -40vmin 0 5.49140394328462vmin currentColor;
}
.background span:nth-child(18) {
    color: #ffebd6;
    top: 8%;
    left: 52%;
    animation-duration: 44s;
    animation-delay: -32s;
    transform-origin: -8vw -1vh;
    box-shadow: 40vmin 0 5.576582638346288vmin currentColor;
}
.background span:nth-child(19) {
    color: #97d8b2;
    top: 85%;
    left: 20%;
    animation-duration: 132s;
    animation-delay: -87s;
    transform-origin: -9vw -17vh;
    box-shadow: 40vmin 0 5.414580941294195vmin currentColor;
}