#bg span {
    display: none;
    width: 5vmin;
    height: 5vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move, fadeIn;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 10;
}
#bg span:nth-child(1) {
    color: #E45A84;
    top: 87%;
    left: 64%;
    animation-duration: 13.3s;
    animation-delay: -15.7s;
    transform-origin: 7vw -21vh;
    box-shadow: 40vmin 0 5.4989919742vmin currentColor;
}
#bg span:nth-child(2) {
    color: #FFACAC;
    top: 77%;
    left: 27%;
    animation-duration: 12.7s;
    animation-delay: -9.5s;
    transform-origin: 10vw -21vh;
    box-shadow: 40vmin 0 5.2701546229vmin currentColor;
}
#bg span:nth-child(3) {
    color: #E45A84;
    top: 89%;
    left: 58%;
    animation-duration: 11s;
    animation-delay: -13.4s;
    transform-origin: -22vw 25vh;
    box-shadow: 40vmin 0 5.2809403638vmin currentColor;
}
#bg span:nth-child(4) {
    color: #583C87;
    top: 71%;
    left: 67%;
    animation-duration: 14.1s;
    animation-delay: -1.1s;
    transform-origin: 14vw 17vh;
    box-shadow: 40vmin 0 11.073631568vmin currentColor;
}
#bg span:nth-child(5) {
    color: #583C87;
    top: 13%;
    left: 99%;
    animation-duration: 14.7s;
    animation-delay: -1.9s;
    transform-origin: -4vw -9vh;
    box-shadow: 40vmin 0 7.151922344vmin currentColor;
}
#bg span:nth-child(6) {
    color: #583C87;
    top: 29%;
    left: 84%;
    animation-duration: 10.9s;
    animation-delay: -2.6s;
    transform-origin: 2vw 18vh;
    box-shadow: -40vmin 0 6.4185675774vmin currentColor;
}
#bg span:nth-child(7) {
    color: #FFACAC;
    top: 83%;
    left: 90%;
    animation-duration: 14.6s;
    animation-delay: -6.1s;
    transform-origin: -11vw 25vh;
    box-shadow: 40vmin 0 11.0267506807vmin currentColor;
}
#bg span:nth-child(8) {
    color: #583C87;
    top: 76%;
    left: 6%;
    animation-duration: 13.6s;
    animation-delay: -2.6s;
    transform-origin: 3vw 16vh;
    box-shadow: -40vmin 0 9.374024181vmin currentColor;
}
#bg span:nth-child(9) {
    color: #583C87;
    top: 85%;
    left: 45%;
    animation-duration: 13.2s;
    animation-delay: -14.4s;
    transform-origin: 10vw 15vh;
    box-shadow: -40vmin 0 9.2145533134vmin currentColor;
}
#bg span:nth-child(10) {
    color: #FFACAC;
    top: 28%;
    left: 3%;
    animation-duration: 11.7s;
    animation-delay: -4.7s;
    transform-origin: -20vw -18vh;
    box-shadow: 40vmin 0 12.4728284995vmin currentColor;
}
#bg span:nth-child(11) {
    color: #E45A84;
    top: 83%;
    left: 70%;
    animation-duration: 15.2s;
    animation-delay: -0.8s;
    transform-origin: -2vw 11vh;
    box-shadow: -40vmin 0 8.4226224139vmin currentColor;
}
#bg span:nth-child(12) {
    color: #FFACAC;
    top: 48%;
    left: 20%;
    animation-duration: 15.6s;
    animation-delay: -7.6s;
    transform-origin: 17vw -22vh;
    box-shadow: -40vmin 0 6.1186940809vmin currentColor;
}
#bg span:nth-child(13) {
    color: #FFACAC;
    top: 25%;
    left: 32%;
    animation-duration: 12s;
    animation-delay: -5.4s;
    transform-origin: -5vw -2vh;
    box-shadow: 40vmin 0 8.5683135885vmin currentColor;
}
#bg span:nth-child(14) {
    color: #E45A84;
    top: 46%;
    left: 77%;
    animation-duration: 13.4s;
    animation-delay: -8.6s;
    transform-origin: 0vw -21vh;
    box-shadow: 40vmin 0 8.8761060218vmin currentColor;
}
#bg span:nth-child(15) {
    color: #E45A84;
    top: 19%;
    left: 37%;
    animation-duration: 13.2s;
    animation-delay: -11.5s;
    transform-origin: -12vw 6vh;
    box-shadow: -40vmin 0 12.6747646257vmin currentColor;
}
#bg span:nth-child(16) {
    color: #583C87;
    top: 63%;
    left: 83%;
    animation-duration: 13.8s;
    animation-delay: -6.3s;
    transform-origin: -11vw 8vh;
    box-shadow: -40vmin 0 5.5997316731vmin currentColor;
}
#bg span:nth-child(17) {
    color: #583C87;
    top: 19%;
    left: 52%;
    animation-duration: 12.9s;
    animation-delay: -0.1s;
    transform-origin: 8vw -3vh;
    box-shadow: 40vmin 0 7.7373093096vmin currentColor;
}
#bg span:nth-child(18) {
    color: #583C87;
    top: 82%;
    left: 14%;
    animation-duration: 15s;
    animation-delay: -8.6s;
    transform-origin: 2vw -9vh;
    box-shadow: -40vmin 0 5.0331967733vmin currentColor;
}
#bg span:nth-child(19) {
    color: #583C87;
    top: 64%;
    left: 14%;
    animation-duration: 14.5s;
    animation-delay: -15.8s;
    transform-origin: 1vw 7vh;
    box-shadow: -40vmin 0 7.7417605407vmin currentColor;
}
#bg span:nth-child(20) {
    color: #E45A84;
    top: 58%;
    left: 73%;
    animation-duration: 12.1s;
    animation-delay: -10.1s;
    transform-origin: 1vw -24vh;
    box-shadow: 40vmin 0 11.5826724933vmin currentColor;
}
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}