body {
      /* height: 100% !important; */
      margin: 0 !important;
      font-family: 'Segoe UI', sans-serif !important;
      background: radial-gradient(circle at top left, #1f1c2c52, #302b63, #24243e96) !important;
    }

    .bubble-container {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      z-index: -1 !important;
    }

      .bubble {
      position: absolute !important;
      border-radius: 50% !important;
      filter: blur(60px) !important;
      opacity: 0.4 !important;
      mix-blend-mode: screen !important;
      animation: floatBubble 25s infinite ease-in-out !important;
    }

    .bubble:nth-child(1) {
      background: #ff6ec7 !important;
      top: 10% !important;
      left: 5% !important;
      animation-delay: 0s !important;
    }

    .bubble:nth-child(2) {
      width: 600px !important;
      height: 600px !important;
      background: #00f2fe !important;
      top: 40% !important;
      left: 60% !important;
      animation-delay: 5s !important;
    }

    .bubble:nth-child(3) {
      width: 500px !important;
      height: 500px !important;
      background: #f9f871 !important;
      top: 70% !important;
      left: 20% !important;
      animation-delay: 10s !important;
    }

    .bubble:nth-child(4) {
      width: 350px !important;
      height: 350px !important;
      background: #a1c4fd !important;
      top: 30% !important;
      left: 80% !important;
      animation-delay: 15s !important;
    }

    @keyframes floatBubble {
      0% {
        transform: translateY(0px) translateX(0px) scale(1);
      }
      25% {
        transform: translateY(-80px) translateX(40px) scale(1.05);
      }
      50% {
        transform: translateY(-160px) translateX(-60px) scale(1.1);
      }
      75% {
        transform: translateY(-80px) translateX(20px) scale(1.05);
      }
      100% {
        transform: translateY(0px) translateX(0px) scale(1);
      }
    }