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

.bubbles {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: scaleX(-1);
  z-index: -1;
}
.bubbles span {
  color: rgba(255, 255, 255, 0.024);
  /* Hier kannst du einen Unschärfe Effekt hinzufügen - je mehr px desto unschärfer - oder auskommentieren ;)  */
  /* filter: blur(3px); */
  width: 36vmin;
  height: 36vmin;
  border-radius: 36vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 90s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bubbles span:nth-child(0) {
  top: 67%;
  left: 46%;
  animation-delay: -16s;
  transform-origin: 5vw 24vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(1) {
  top: 19%;
  left: 81%;
  animation-delay: -37s;
  transform-origin: 2vw -11vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(2) {
  top: 50%;
  left: 100%;
  animation-delay: -1s;
  transform-origin: 3vw -23vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(3) {
  top: 3%;
  left: 54%;
  animation-delay: -21s;
  transform-origin: -3vw -8vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(4) {
  top: 59%;
  left: 29%;
  animation-delay: -21s;
  transform-origin: -23vw -11vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(5) {
  top: 63%;
  left: 100%;
  animation-delay: -18s;
  transform-origin: 15vw 23vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(6) {
  top: 53%;
  left: 49%;
  animation-delay: -49s;
  transform-origin: -15vw -24vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(7) {
  top: 93%;
  left: 49%;
  animation-delay: -13s;
  transform-origin: 4vw 12vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(8) {
  top: 68%;
  left: 7%;
  animation-delay: -18s;
  transform-origin: -24vw 6vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(9) {
  top: 5%;
  left: 31%;
  animation-delay: -38s;
  transform-origin: 0vw -2vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(10) {
  top: 27%;
  left: 76%;
  animation-delay: -36s;
  transform-origin: -3vw -10vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(11) {
  top: 31%;
  left: 21%;
  animation-delay: -21s;
  transform-origin: 24vw 11vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(12) {
  top: 58%;
  left: 34%;
  animation-delay: -41s;
  transform-origin: 1vw -23vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(13) {
  top: 41%;
  left: 18%;
  animation-delay: -25s;
  transform-origin: 11vw 0vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(14) {
  top: 1%;
  left: 77%;
  animation-delay: -10s;
  transform-origin: 9vw -12vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(15) {
  top: 78%;
  left: 100%;
  animation-delay: -6s;
  transform-origin: 1vw 7vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(16) {
  top: 64%;
  left: 65%;
  animation-delay: -40s;
  transform-origin: -5vw 16vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(17) {
  top: 17%;
  left: 94%;
  animation-delay: -20s;
  transform-origin: -4vw 16vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(18) {
  top: 58%;
  left: 50%;
  animation-delay: -20s;
  transform-origin: 23vw -23vh;
  box-shadow: 40vmin 0 0vmin currentColor;
}
.bubbles span:nth-child(19) {
  top: 39%;
  left: 91%;
  animation-delay: -50s;
  transform-origin: 9vw 0vh;
  box-shadow: -40vmin 0 0vmin currentColor;
}
.bubbles span:nth-of-type(odd) {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
}