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

.backgroundCircle {
    position: relative;
    width:calc(100vw - 20px);
    height: auto;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.backgroundCircle secc {
    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;
    z-index: -1;
}


.backgroundCircle secc:nth-child(0) {
    color: #eeeeee;
    top: 16%;
    left: 44%;
    animation-duration: 18s;
    animation-delay: -4s;
    transform-origin: 3vw 17vh;
    box-shadow: -40vmin 0 5.764950229462254vmin currentColor;
}
.backgroundCircle secc:nth-child(1) {
    color: #f9f6ff;
    top: 62%;
    left: 50%;
    animation-duration: 37s;
    animation-delay: -29s;
    transform-origin: 23vw 18vh;
    box-shadow: -40vmin 0 5.489191452078849vmin currentColor;
}
.backgroundCircle secc:nth-child(2) {
    color: #f9f6ff;
    top: 61%;
    left: 24%;
    animation-duration: 28s;
    animation-delay: -4s;
    transform-origin: 2vw 15vh;
    box-shadow: 40vmin 0 5.515682791260689vmin currentColor;
}
.backgroundCircle secc:nth-child(3) {
    color: #eeeeee;
    top: 2%;
    left: 72%;
    animation-duration: 55s;
    animation-delay: -2s;
    transform-origin: -19vw -16vh;
    box-shadow: 40vmin 0 5.833559857694317vmin currentColor;
}
.backgroundCircle secc:nth-child(4) {
    color: #eeeeee;
    top: 36%;
    left: 50%;
    animation-duration: 30s;
    animation-delay: -36s;
    transform-origin: 0vw -10vh;
    box-shadow: 40vmin 0 5.169602408097482vmin currentColor;
}
.backgroundCircle secc:nth-child(5) {
    color: #eeeeee;
    top: 42%;
    left: 4%;
    animation-duration: 55s;
    animation-delay: -3s;
    transform-origin: -8vw -20vh;
    box-shadow: 40vmin 0 5.648897995890754vmin currentColor;
}
.backgroundCircle secc:nth-child(6) {
    color: #daf0fd;
    top: 14%;
    left: 59%;
    animation-duration: 47s;
    animation-delay: -15s;
    transform-origin: 9vw 6vh;
    box-shadow: -40vmin 0 5.802914497501067vmin currentColor;
}
.backgroundCircle secc:nth-child(7) {
    color: #f9f6ff;
    top: 14%;
    left: 76%;
    animation-duration: 20s;
    animation-delay: -41s;
    transform-origin: 6vw -11vh;
    box-shadow: 40vmin 0 5.521390003830687vmin currentColor;
}
.backgroundCircle secc:nth-child(8) {
    color: #daf0fd;
    top: 78%;
    left: 42%;
    animation-duration: 55s;
    animation-delay: -18s;
    transform-origin: 12vw 25vh;
    box-shadow: 40vmin 0 5.207459621781672vmin currentColor;
}
.backgroundCircle secc:nth-child(9) {
    color: #daf0fd;
    top: 62%;
    left: 75%;
    animation-duration: 36s;
    animation-delay: -21s;
    transform-origin: 8vw -11vh;
    box-shadow: -40vmin 0 5.098330732548083vmin currentColor;
}
.backgroundCircle secc:nth-child(10) {
    color: #daf0fd;
    top: 31%;
    left: 96%;
    animation-duration: 38s;
    animation-delay: -45s;
    transform-origin: -7vw -22vh;
    box-shadow: 40vmin 0 5.548885804773985vmin currentColor;
}
.backgroundCircle secc:nth-child(11) {
    color: #eeeeee;
    top: 63%;
    left: 43%;
    animation-duration: 27s;
    animation-delay: -32s;
    transform-origin: -7vw 1vh;
    box-shadow: 40vmin 0 5.600755012913743vmin currentColor;
}
.backgroundCircle secc:nth-child(12) {
    color: #f9f6ff;
    top: 80%;
    left: 48%;
    animation-duration: 14s;
    animation-delay: -44s;
    transform-origin: 2vw -10vh;
    box-shadow: 40vmin 0 5.731149254165803vmin currentColor;
}
.backgroundCircle secc:nth-child(13) {
    color: #f9f6ff;
    top: 47%;
    left: 100%;
    animation-duration: 9s;
    animation-delay: -36s;
    transform-origin: 14vw -9vh;
    box-shadow: 40vmin 0 5.979407241963283vmin currentColor;
}
.backgroundCircle secc:nth-child(14) {
    color: #daf0fd;
    top: 46%;
    left: 48%;
    animation-duration: 40s;
    animation-delay: -4s;
    transform-origin: -12vw -20vh;
    box-shadow: 40vmin 0 5.134939198723382vmin currentColor;
}
.backgroundCircle secc:nth-child(15) {
    color: #f9f6ff;
    top: 74%;
    left: 40%;
    animation-duration: 12s;
    animation-delay: -23s;
    transform-origin: -8vw 19vh;
    box-shadow: -40vmin 0 5.974046862615761vmin currentColor;
}
.backgroundCircle secc:nth-child(16) {
    color: #eeeeee;
    top: 18%;
    left: 100%;
    animation-duration: 52s;
    animation-delay: -16s;
    transform-origin: -18vw -5vh;
    box-shadow: 40vmin 0 5.701807256331639vmin currentColor;
}
.backgroundCircle secc:nth-child(17) {
    color: #daf0fd;
    top: 73%;
    left: 5%;
    animation-duration: 24s;
    animation-delay: -14s;
    transform-origin: 11vw -5vh;
    box-shadow: -40vmin 0 5.4285927693063485vmin currentColor;
}
.backgroundCircle secc:nth-child(18) {
    color: #eeeeee;
    top: 25%;
    left: 17%;
    animation-duration: 33s;
    animation-delay: -22s;
    transform-origin: 22vw -18vh;
    box-shadow: -40vmin 0 5.07997463325893vmin currentColor;
}
.backgroundCircle secc:nth-child(19) {
    color: #eeeeee;
    top: 78%;
    left: 59%;
    animation-duration: 26s;
    animation-delay: -4s;
    transform-origin: -3vw -5vh;
    box-shadow: -40vmin 0 5.012752299478699vmin currentColor;
}