/* Container für die Kreise */
.circles {
   position: fixed; /* Damit die Kreise im Hintergrund bleiben */
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1; /* Damit die Kreise nicht über den Inhalt erscheinen */
   overflow: hidden;
   display: block !important; /* Stellt sicher, dass es nicht von einer anderen Regel versteckt wird */
}

.circle {
  position: absolute;
  background: linear-gradient(45deg, rgb(243, 36, 209, 0.2), rgba(243, 5, 112, 0.2), rgba(196, 109, 243, 0.2));
  background-size: 400% 400%;
  border-radius: 50%;
  filter: blur(50px); /* Intensiverer Blur */
  animation: moveRandom var(--animation-duration) linear infinite, gradientShift 5s ease infinite; /* Schnellerer Farbwechsel */
}

/* Generiere zufällige Positionen, Größen und Richtungen */
.circle:nth-child(1) {
  width: 800px;
  height: 800px;
  top: 10%;
  left: 20%;
  --animation-duration: 50s;
  --x1: 30vw;
  --y1: -40vh;
  --x2: -30vw;
  --y2: 30vh;
  --x3: 20vw;
  --y3: -20vh;
}

.circle:nth-child(2) {
  width: 900px;
  height: 900px;
  top: 50%;
  left: 70%;
  --animation-duration: 60s;
  --x1: -40vw;
  --y1: 50vh;
  --x2: 30vw;
  --y2: -70vh;
  --x3: -60vw;
  --y3: 40vh;
}

.circle:nth-child(3) {
  width: 850px;
  height: 850px;
  top: 80%;
  left: 30%;
  --animation-duration: 55s;
  --x1: 50vw;
  --y1: -30vh;
  --x2: -20vw;
  --y2: 60vh;
  --x3: 30vw;
  --y3: -50vh;
}

.circle:nth-child(4) {
  width: 1000px;
  height: 1000px;
  top: 40%;
  left: 10%;
  --animation-duration: 70s;
  --x1: -25vw;
  --y1: -35vh;
  --x2: 40vw;
  --y2: 65vh;
  --x3: -55vw;
  --y3: 20vh;
}

.circle:nth-child(5) {
  width: 920px;
  height: 920px;
  top: 20%;
  left: 80%;
  --animation-duration: 65s;
  --x1: 35vw;
  --y1: 45vh;
  --x2: -25vw;
  --y2: -55vh;
  --x3: 15vw;
  --y3: 10vh;
}

@keyframes moveRandom {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(var(--x1), var(--y1));
  }
  50% {
    transform: translate(var(--x2), var(--y2));
  }
  75% {
    transform: translate(var(--x3), var(--y3));
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}