body {
          background-image: url('https://giffiles.alphacoders.com/221/221617.gif');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed;

          cursor: url(https://ik.imagekit.io/o9m4namuc/cursor-c.png?updatedAt=1761473742056), auto;
      }

      a,
      button,
      [role="button"],
      .clickable {
          cursor: url('https://ik.imagekit.io/o9m4namuc/cursor-a.png?updatedAt=1761473741939'), pointer;
      }

      .gray-backdrop {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.712);
          z-index: -2;
      }


      .main-content {
          z-index: 100;
          position: absolute;
          top: 0;
          width: 100%;

      }

      .lottie-container {
          position: fixed;
          inset: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          pointer-events: none;
          z-index: -1;
      }

      .lottie-animation {
          position: absolute;
          top: -80px;
          width: 100%;
          height: 100%;
      }

      .buttons-container {
          max-width: 500px;
          margin: 0 auto;
          padding: 0 20px;
          display: grid;
          grid-template-columns: repeat(2, minmax(100px, 1fr));
          gap: 1rem;
      }

      .menu-btn {
          /* all: unset; */
          /* cursor: pointer; */
          /* font-weight: bolder; */
          text-decoration: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          position: relative;
          border-radius: 999vw;
          background-color: rgba(0, 0, 0, 0.75);
          box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
              0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
      }


      .menu-btn::after {
          content: "";
          position: absolute;
          z-index: 0;
          width: calc(100% + 0.3em);
          height: calc(100% + 0.3em);
          top: -0.15em;
          left: -0.15em;
          border-radius: inherit;
          background: linear-gradient(-135deg,
                  rgba(5, 5, 5, 0.5),
                  transparent 20%,
                  transparent 100%);
          filter: blur(0.0125em);
          opacity: 0.25;
          mix-blend-mode: multiply;
      }

      .menu-btn .button-outer {
          position: relative;
          z-index: 1;
          border-radius: inherit;
          transition: box-shadow 300ms ease;
          will-change: box-shadow;
          box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
              0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
              0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
      }

      .menu-btn:hover .button-outer {
          box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
              0 0 0 0 rgba(5, 5, 5, 0.25);
      }

      .button-inner {
          --inset: 0.035em;
          position: relative;
          z-index: 1;
          border-radius: inherit;
          padding: 1em 1.5em;
          background-image: linear-gradient(135deg,
                  rgba(230, 230, 230, 1),
                  rgba(180, 180, 180, 1));
          transition: box-shadow 300ms ease, clip-path 250ms ease,
              background-image 250ms ease, transform 250ms ease;
          will-change: box-shadow, clip-path, background-image, transform;
          overflow: clip;
          clip-path: inset(0 0 0 0 round 999vw);
          box-shadow:
              /* 1 */
              0 0 0 0 inset rgba(5, 5, 5, 0.1),
              /* 2 */
              -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
              /* 3 */
              0 0 0 0 inset rgba(5, 5, 5, 0.1),
              /* 4 */
              0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
              /* 5 */
              0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
              /* 6 */
              0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
              /* 7 */
              -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
      }

      .menu-btn:hover .button-inner {
          clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 999vw);
          box-shadow:
              /* 1 */
              0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
              /* 2 */
              -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
              /* 3 */
              0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
              /* 4 */
              0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
              /* 5 */
              0 0 0 0 inset rgba(255, 255, 255, 1),
              /* 6 */
              0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
              /* 7 */
              -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
      }

      .menu-btn .button-inner span {
          position: relative;
          z-index: 4;
          font-family: "Inter", sans-serif;
          letter-spacing: -0.05em;
          font-weight: bold;
          color: rgba(0, 0, 0, 0);
          background-image: linear-gradient(135deg,
                  rgba(25, 25, 25, 1),
                  rgba(75, 75, 75, 1));
          -webkit-background-clip: text;
          background-clip: text;
          transition: transform 250ms ease;
          display: block;
          will-change: transform;
          text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
      }

      .menu-btn:hover .button-inner span {
          transform: scale(0.975);
      }

      .menu-btn:active .button-inner {
          transform: scale(0.975);
      }


      #toggleMusicBtn {

          position: relative;
          /* bottom: 20px;
          right: 20px; */
          z-index: 999;
          background: rgba(192, 190, 190, 0.6);
          border: none;
          border-radius: 50%;
          width: 50px;
          height:50px;
          /* cursor: pointer; */
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
      }

 

      @keyframes floating {
          0% {
              transform: translateY(0px);
          }

          50% {
              transform: translateY(-15px);
          }

          100% {
              transform: translateY(0px);
          }
      }

      .gojo {
          position: absolute;
          top: 0;
          right: 50px;
          height: 300px;
          animation: floating 3s ease-in-out infinite;
          z-index: 1;
      }

      .geto-gojo {
          position: absolute;
          top: 50px;
          left: 50px;
          height: 250px;
          animation: floating 3s ease-in-out infinite;
          z-index: 1;
      }

      footer {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 1rem;
          color: white;
          text-align: center;
          font-size: 1rem;
          z-index: 10;
      }