.background {
  width: 100vw;
  height: 100vh;
  background: transparent;
  position: fixed;
  overflow: hidden;
  opacity: 0.4;
  z-index: 1; }

.background span {
  width: 80vmin;
  height: 80vmin;
  border-radius: 80vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 30s;
  animation-delay: -10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  .background span:nth-child(1) {
    color: #d4b9f5;
    top: 65%;
    left: 70%;
    animation-duration: 11.1s;
    animation-delay: -5.6s;
    transform-origin: -15vw -20vh;
    box-shadow: -160vmin 0 37.7444073609vmin currentColor; }
  .background span:nth-child(2) {
    color: #82d2f1;
    top: 76%;
    left: 90%;
    animation-duration: 12.3s;
    animation-delay: -6.8s;
    transform-origin: 20vw 10vh;
    box-shadow: 160vmin 0 47.1231106269vmin currentColor; }
  .background span:nth-child(3) {
    color: #d6f4ff;
    top: 7%;
    left: 99%;
    animation-duration: 12.2s;
    animation-delay: -8s;
    transform-origin: 11vw 19vh;
    box-shadow: -160vmin 0 25.2480200793vmin currentColor; }
  .background span:nth-child(4) {
    color: #d6f4ff;
    top: 16%;
    left: 54%;
    animation-duration: 11.2s;
    animation-delay: -9.7s;
    transform-origin: 3vw 22vh;
    box-shadow: 160vmin 0 24.8949108122vmin currentColor; }
  .background span:nth-child(5) {
    color: #d4b9f5;
    top: 30%;
    left: 83%;
    animation-duration: 12.5s;
    animation-delay: -12.8s;
    transform-origin: -1vw -21vh;
    box-shadow: -160vmin 0 34.4034362236vmin currentColor; }
  .background span:nth-child(6) {
    color: #82d2f1;
    top: 51%;
    left: 11%;
    animation-duration: 10.7s;
    animation-delay: -4.8s;
    transform-origin: -19vw 2vh;
    box-shadow: 160vmin 0 20.2386427684vmin currentColor; }
  .background span:nth-child(7) {
    color: #82d2f1;
    top: 40%;
    left: 89%;
    animation-duration: 12.7s;
    animation-delay: -0.9s;
    transform-origin: 11vw 17vh;
    box-shadow: 160vmin 0 47.8404332372vmin currentColor; }
  .background span:nth-child(8) {
    color: #82d2f1;
    top: 84%;
    left: 6%;
    animation-duration: 13.9s;
    animation-delay: -3.9s;
    transform-origin: 0vw -8vh;
    box-shadow: 160vmin 0 47.8054109096vmin currentColor; }
  .background span:nth-child(9) {
    color: #d4b9f5;
    top: 93%;
    left: 60%;
    animation-duration: 14.2s;
    animation-delay: -13.8s;
    transform-origin: -1vw 20vh;
    box-shadow: 160vmin 0 27.2994877057vmin currentColor; }
  .background span:nth-child(10) {
    color: #d6f4ff;
    top: 88%;
    left: 67%;
    animation-duration: 10.4s;
    animation-delay: -13.6s;
    transform-origin: 6vw -8vh;
    box-shadow: 160vmin 0 32.1495709266vmin currentColor; }

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