:root {
  --color-bg1: white;
  --color5: 186,212,255;
  --color4: 140,100,255;
  --circle-size: 20%;
  --blending: hard-light;
}


@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(0%);
  }
}

@keyframes moveHorizontalreverse {
    0% {
        transform: translateX(50%) translateY(10%);
      }
      50% {
        transform: translateX(-50%) translateY(-10%);
      }
      100% {
        transform: translateX(50%) translateY(0%);
      }
    }



.gradient-bg {
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));

}
.gradient-bg svg {
  display: none;
}

.gradient-bg .g4 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color5), 1) 0, rgba(var(--color4), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: 40%;
  left: 40%;
opacity: 0.8;
   animation: moveHorizontalreverse 25s infinite linear; 
}

.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: -33%;
  left: -34%;
  opacity: 1;
  animation: moveHorizontal 30s infinite linear; 
}