.register-box {
    width: 700px;
}

@media (max-width: 576px){
    .register-box {
        width: 90%;
    }
}

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

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    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: #ff8080;
    top: 51%;
    left: 38%;
    animation-duration: 30s;
    animation-delay: -21s;
    transform-origin: 20vw -15vh;
    box-shadow: 40vmin 0 5.895747629472504vmin currentColor;
}
.background span:nth-child(1) {
    color: #ff0000;
    top: 61%;
    left: 1%;
    animation-duration: 47s;
    animation-delay: -15s;
    transform-origin: -17vw -15vh;
    box-shadow: -40vmin 0 5.223122587903966vmin currentColor;
}
.background span:nth-child(2) {
    color: #ff0000;
    top: 46%;
    left: 98%;
    animation-duration: 39s;
    animation-delay: -38s;
    transform-origin: -10vw 24vh;
    box-shadow: 40vmin 0 5.37451959375761vmin currentColor;
}
.background span:nth-child(3) {
    color: #ff0000;
    top: 100%;
    left: 54%;
    animation-duration: 54s;
    animation-delay: -14s;
    transform-origin: 20vw 17vh;
    box-shadow: 40vmin 0 5.483812689506382vmin currentColor;
}
.background span:nth-child(4) {
    color: #ff0000;
    top: 73%;
    left: 87%;
    animation-duration: 53s;
    animation-delay: -33s;
    transform-origin: -12vw 11vh;
    box-shadow: -40vmin 0 5.436310539323019vmin currentColor;
}
.background span:nth-child(5) {
    color: #808080;
    top: 93%;
    left: 82%;
    animation-duration: 42s;
    animation-delay: -30s;
    transform-origin: -20vw 1vh;
    box-shadow: -40vmin 0 5.496859881423107vmin currentColor;
}
.background span:nth-child(6) {
    color: #ff0000;
    top: 30%;
    left: 53%;
    animation-duration: 19s;
    animation-delay: -9s;
    transform-origin: 9vw -8vh;
    box-shadow: -40vmin 0 5.836994057473581vmin currentColor;
}
.background span:nth-child(7) {
    color: #ff0000;
    top: 21%;
    left: 7%;
    animation-duration: 47s;
    animation-delay: -1s;
    transform-origin: -20vw -18vh;
    box-shadow: -40vmin 0 5.4214863943052025vmin currentColor;
}
.background span:nth-child(8) {
    color: #ff8080;
    top: 38%;
    left: 78%;
    animation-duration: 19s;
    animation-delay: -3s;
    transform-origin: 8vw -7vh;
    box-shadow: 40vmin 0 5.1661605980384735vmin currentColor;
}
.background span:nth-child(9) {
    color: #ff8080;
    top: 46%;
    left: 77%;
    animation-duration: 23s;
    animation-delay: -18s;
    transform-origin: 22vw 15vh;
    box-shadow: 40vmin 0 5.002921428883402vmin currentColor;
}
.background span:nth-child(10) {
    color: #ff8080;
    top: 70%;
    left: 21%;
    animation-duration: 34s;
    animation-delay: -43s;
    transform-origin: 1vw 24vh;
    box-shadow: -40vmin 0 5.30489110726871vmin currentColor;
}
.background span:nth-child(11) {
    color: #ff8080;
    top: 40%;
    left: 20%;
    animation-duration: 35s;
    animation-delay: -25s;
    transform-origin: 16vw 21vh;
    box-shadow: 40vmin 0 5.330124606714074vmin currentColor;
}
.background span:nth-child(12) {
    color: #ff8080;
    top: 11%;
    left: 45%;
    animation-duration: 31s;
    animation-delay: -10s;
    transform-origin: -18vw -15vh;
    box-shadow: -40vmin 0 5.122712743798599vmin currentColor;
}
.background span:nth-child(13) {
    color: #ff0000;
    top: 89%;
    left: 39%;
    animation-duration: 24s;
    animation-delay: -28s;
    transform-origin: 23vw 3vh;
    box-shadow: 40vmin 0 5.8107416044630185vmin currentColor;
}
.background span:nth-child(14) {
    color: #808080;
    top: 36%;
    left: 76%;
    animation-duration: 51s;
    animation-delay: -14s;
    transform-origin: -18vw 19vh;
    box-shadow: 40vmin 0 5.863137342880539vmin currentColor;
}
.background span:nth-child(15) {
    color: #808080;
    top: 62%;
    left: 78%;
    animation-duration: 36s;
    animation-delay: -22s;
    transform-origin: -14vw 24vh;
    box-shadow: 40vmin 0 5.69539528090665vmin currentColor;
}
.background span:nth-child(16) {
    color: #ff8080;
    top: 17%;
    left: 87%;
    animation-duration: 11s;
    animation-delay: -26s;
    transform-origin: -7vw -8vh;
    box-shadow: 40vmin 0 5.093617707030602vmin currentColor;
}
.background span:nth-child(17) {
    color: #808080;
    top: 73%;
    left: 34%;
    animation-duration: 43s;
    animation-delay: -41s;
    transform-origin: -18vw 21vh;
    box-shadow: -40vmin 0 5.872220781480116vmin currentColor;
}
.background span:nth-child(18) {
    color: #ff8080;
    top: 96%;
    left: 55%;
    animation-duration: 7s;
    animation-delay: -18s;
    transform-origin: -1vw 25vh;
    box-shadow: 40vmin 0 5.21990492727244vmin currentColor;
}
.background span:nth-child(19) {
    color: #ff8080;
    top: 11%;
    left: 42%;
    animation-duration: 24s;
    animation-delay: -31s;
    transform-origin: 22vw -15vh;
    box-shadow: 40vmin 0 5.809172364893844vmin currentColor;
}