html {
          box-sizing: border-box;
      }

      *,
      *:before,
      *:after {
          box-sizing: inherit;
          margin: 0;
          padding: 0;
      }

      html,
      body,
      canvas {
          width: 100%;
          height: 100%;
      }

      body {
          width: 100%;
          height: 100%;

          background-size: cover;
          background-position: 0 0;
          background-repeat: no-repeat;
          position: relative;
          z-index: 0;
      }

      body:after {
          content: '';
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.1);
          z-index: 1;
          animation: thunder-bg 6s infinite;
      }



      body {
          background-image: url(https://i.pinimg.com/1200x/65/eb/fa/65ebfa8fa0211982422b14545ca1cc6f.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed;

          cursor: url(https://ik.imagekit.io/o9m4namuc/sakura-cursor.png), auto;
          /* caret-color: blue; */
          overflow: hidden;
      }

      a,
      button,
      [role="button"],
      .clickable {
          cursor: url(https://ik.imagekit.io/o9m4namuc/saura-pointer.png), pointer;
          /* caret-color: blue; */
      }


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

      }

      .buttons-container {
          max-width: 500px;
          margin: 0 auto;
          padding: 0 20px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .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);
          min-width: 2rem;
      }


      .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 3.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);
          }
      }



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

      /* loading */
      /* Styling untuk loading screen dengan blur effect */
      #loading-screen {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(10px);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          z-index: 9999;
          transition: all 0.5s ease-out;
      }

      .loading-container {
          padding: 3rem;
          text-align: center;
          min-width: 60%;
          position: relative;
          overflow: hidden;
      }


      .loading-text {
          font-size: 1.4rem;
          font-weight: 600;
          margin-bottom: 2rem;
          color: #2c3e50;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      .progress-container {
          background: #e9ecef;
          border-radius: 10px;
          height: 16px;
          margin-bottom: 1.5rem;
          overflow: hidden;
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
          position: relative;
      }

      .custom-progress-bar {
          height: 100%;
          border-radius: 10px;
          transition: width 0.3s ease;
          position: relative;
          overflow: hidden;
          background-color: rgb(235, 116, 135);
          /* background-color: #861657;
          background-image: linear-gradient(326deg, #861657 0%, #ffa69e 74%); */
      }

      .custom-progress-bar::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg,
                  transparent,
                  rgba(255, 255, 255, 0.4),
                  transparent);
          animation: shimmer 1.5s infinite;
      }

      .progress-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1rem;
      }

      .loading-percentage {
          font-size: 1rem;
          font-weight: 700;
          color: #ffffff;
          font-family: 'Courier New', monospace;
          position: absolute;
          z-index: 999;
          top: 0;
          left: 1rem;
      }

      .loading-time {
          font-size: 0.9rem;
          color: #ffffff;
          font-weight: 300
      }

      .loading-stats {
          display: flex;
          justify-content: space-around;
          margin-top: 1.5rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e9ecef;
      }

      .stat-item {
          text-align: center;
      }

      .stat-value {
          font-size: 1.2rem;
          font-weight: 700;
          color: #2c3e50;
      }

      .stat-label {
          font-size: 0.8rem;
          color: #6c757d;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      @keyframes bounce {

          0%,
          20%,
          50%,
          80%,
          100% {
              transform: translateY(0);
          }

          40% {
              transform: translateY(-10px);
          }

          60% {
              transform: translateY(-5px);
          }
      }

      @keyframes shimmer {
          0% {
              left: -100%;
          }

          100% {
              left: 100%;
          }
      }

      @keyframes pulse {
          0% {
              opacity: 1;
          }

          50% {
              opacity: 0.7;
          }

          100% {
              opacity: 1;
          }
      }

      /* Styling untuk konten utama */
      #main-content {
          display: none;
          animation: fadeIn 1s ease-in;
      }

      .hero-section {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 5rem 0;
          margin-bottom: 3rem;
      }

      .feature-card {
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          border: none;
          border-radius: 15px;
          overflow: hidden;
      }

      .feature-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      }

      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(20px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }