body,
    html {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
      background: #282727;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .animation-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
      z-index: 50;
    }

    .gradients-container {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      filter: url(#blurMe) blur(40px);
    }

    .gradient-circle {
      position: absolute;
      width: 80%;
      height: 80%;
      top: calc(50% - 40%);
      left: calc(50% - 40%);
      background: radial-gradient(circle at center, rgba(18, 113, 255, 0.8) 0%, rgba(18, 113, 255, 0) 50%);
      mix-blend-mode: hard-light;
      animation: moveInCircle 40s linear infinite;
    }

    @keyframes moveInCircle {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes moveVertical {
      0% {
        transform: translateY(-50%);
      }

      50% {
        transform: translateY(50%);
      }

      100% {
        transform: translateY(-50%);
      }
    }

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

      50% {
        transform: translateX(50%) translateY(10%);
      }

      100% {
        transform: translateX(-50%) translateY(-10%);
      }
    }