#bubbleContainer {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          overflow: visible;
          z-index: 1;
          opacity: 0.8;
        }


        .bubble {
          position: absolute;
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 201, 201, 0.596), rgba(255, 152, 203, 0.521), rgba(255, 255, 255, 0.884));
          box-shadow: inset -10px -10px 20px rgba(255, 255, 255, 0.5), inset 10px 10px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgb(255, 0, 0);
          animation: float 10s ease-in-out infinite;
          border: 1px solid rgba(255, 255, 255, 0.5);
          z-index: 99999;
        }

        @keyframes float {
          0% {
            transform: translateY(0) translateX(0) scale(0.5);
            opacity: 1;
          }

          50% {
            transform: translateY(-50vh) translateX(20vw) scale(1);
            opacity: 0.8;
          }

          100% {
            transform: translateY(-100vh) translateX(-20vw) scale(0.5);
            opacity: 0;
          }
        }