html, body {
      height: 100%;
      margin: 0;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      font-family: system-ui, sans-serif;
      overflow: hidden;
    }

    /* Math Background Animation */
    .math-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .math-symbol {
      position: absolute;
      opacity: 0.08;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      font-family: 'Times New Roman', serif;
      color: #2c3e50;
      font-weight: 500;
    }

    .math-symbol svg {
      width: 60px;
      height: 60px;
      fill: #2c3e50;
    }

    .math-equation {
      font-size: 24px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .math-equation.large {
      font-size: 32px;
    }

    /* Different animation paths */
    .float-horizontal {
      animation: floatHorizontalLoop 25s infinite linear;
    }

    .float-diagonal {
      animation: floatDiagonalLoop 30s infinite linear;
    }

    .float-circular {
      animation: floatCircular 35s infinite linear;
    }

    .float-vertical {
      animation: floatVerticalLoop 28s infinite linear;
    }

    .float-figure8 {
      animation: floatFigure8 40s infinite linear;
    }

    .float-spiral {
      animation: floatSpiral 45s infinite linear;
    }

    .float-wave {
      animation: floatWave 30s infinite linear;
    }

    .float-orbit {
      animation: floatOrbit 35s infinite linear;
    }

    @keyframes floatHorizontalLoop {
      0% { transform: translateX(-100px) translateY(0px); }
      25% { transform: translateX(calc(50vw)) translateY(-80px); }
      50% { transform: translateX(calc(100vw + 100px)) translateY(0px); }
      75% { transform: translateX(calc(50vw)) translateY(calc(100vh + 80px)); }
      100% { transform: translateX(-100px) translateY(0px); }
    }

    @keyframes floatVerticalLoop {
      0% { transform: translateY(-100px) translateX(0px); }
      25% { transform: translateY(calc(50vh)) translateX(-80px); }
      50% { transform: translateY(calc(100vh + 100px)) translateX(0px); }
      75% { transform: translateY(calc(50vh)) translateX(calc(100vw + 80px)); }
      100% { transform: translateY(-100px) translateX(0px); }
    }

    @keyframes floatDiagonalLoop {
      0% { transform: translate(-100px, -100px); }
      12.5% { transform: translate(calc(25vw), calc(25vh)); }
      25% { transform: translate(calc(100vw + 100px), calc(100vh + 100px)); }
      37.5% { transform: translate(calc(75vw), calc(25vh)); }
      50% { transform: translate(calc(100vw + 100px), -100px); }
      62.5% { transform: translate(calc(25vw), calc(75vh)); }
      75% { transform: translate(-100px, calc(100vh + 100px)); }
      87.5% { transform: translate(calc(75vw), calc(75vh)); }
      100% { transform: translate(-100px, -100px); }
    }

    @keyframes floatCircular {
      0% { transform: translate(50vw, 50vh) rotate(0deg) translateX(200px) rotate(0deg); }
      100% { transform: translate(50vw, 50vh) rotate(360deg) translateX(200px) rotate(-360deg); }
    }

    @keyframes floatFigure8 {
      0% { transform: translate(50vw, 50vh) rotate(0deg) translateX(120px) translateY(0px); }
      12.5% { transform: translate(50vw, 50vh) rotate(45deg) translateX(120px) translateY(-60px); }
      25% { transform: translate(50vw, 50vh) rotate(90deg) translateX(120px) translateY(0px); }
      37.5% { transform: translate(50vw, 50vh) rotate(135deg) translateX(120px) translateY(60px); }
      50% { transform: translate(50vw, 50vh) rotate(180deg) translateX(120px) translateY(0px); }
      62.5% { transform: translate(50vw, 50vh) rotate(225deg) translateX(120px) translateY(-60px); }
      75% { transform: translate(50vw, 50vh) rotate(270deg) translateX(120px) translateY(0px); }
      87.5% { transform: translate(50vw, 50vh) rotate(315deg) translateX(120px) translateY(60px); }
      100% { transform: translate(50vw, 50vh) rotate(360deg) translateX(120px) translateY(0px); }
    }

    @keyframes floatSpiral {
      0% { transform: translate(50vw, 50vh) rotate(0deg) translateX(50px) rotate(0deg); }
      12.5% { transform: translate(50vw, 50vh) rotate(45deg) translateX(100px) rotate(-45deg); }
      25% { transform: translate(50vw, 50vh) rotate(90deg) translateX(150px) rotate(-90deg); }
      37.5% { transform: translate(50vw, 50vh) rotate(135deg) translateX(200px) rotate(-135deg); }
      50% { transform: translate(50vw, 50vh) rotate(180deg) translateX(250px) rotate(-180deg); }
      62.5% { transform: translate(50vw, 50vh) rotate(225deg) translateX(200px) rotate(-225deg); }
      75% { transform: translate(50vw, 50vh) rotate(270deg) translateX(150px) rotate(-270deg); }
      87.5% { transform: translate(50vw, 50vh) rotate(315deg) translateX(100px) rotate(-315deg); }
      100% { transform: translate(50vw, 50vh) rotate(360deg) translateX(50px) rotate(-360deg); }
    }

    @keyframes floatWave {
      0% { transform: translateX(-100px) translateY(50vh) rotate(0deg); }
      12.5% { transform: translateX(calc(12.5vw)) translateY(calc(50vh - 100px)) rotate(45deg); }
      25% { transform: translateX(calc(25vw)) translateY(50vh) rotate(90deg); }
      37.5% { transform: translateX(calc(37.5vw)) translateY(calc(50vh + 100px)) rotate(135deg); }
      50% { transform: translateX(calc(50vw)) translateY(50vh) rotate(180deg); }
      62.5% { transform: translateX(calc(62.5vw)) translateY(calc(50vh - 100px)) rotate(225deg); }
      75% { transform: translateX(calc(75vw)) translateY(50vh) rotate(270deg); }
      87.5% { transform: translateX(calc(87.5vw)) translateY(calc(50vh + 100px)) rotate(315deg); }
      100% { transform: translateX(calc(100vw + 100px)) translateY(50vh) rotate(360deg); }
    }

    @keyframes floatOrbit {
      0% { transform: translate(20vw, 20vh) rotate(0deg) translateX(100px) rotate(0deg); }
      25% { transform: translate(80vw, 20vh) rotate(90deg) translateX(100px) rotate(-90deg); }
      50% { transform: translate(80vw, 80vh) rotate(180deg) translateX(100px) rotate(-180deg); }
      75% { transform: translate(20vw, 80vh) rotate(270deg) translateX(100px) rotate(-270deg); }
      100% { transform: translate(20vw, 20vh) rotate(360deg) translateX(100px) rotate(-360deg); }
    }

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: auto;
    }

    form {
      display: flex;
      align-items: center;
      gap: 1rem;
      z-index: 10;
      background: rgba(255, 255, 255, 0.9);
      padding: 2rem;
      border-radius: 1rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }

    #pageInput {
      padding: 0.55rem 0.8rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 0.375rem;
      min-width: 14rem;
    }

    button {
      padding: 0.55rem 1.25rem;
      font-size: 1rem;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      background: #000;
      color: #fff;
    }

    button:hover {
      filter: brightness(1.1);
    }

    #recentGames {
      position: absolute;
      right: 1rem;
      bottom: 5rem;
      background: rgba(240, 240, 240, 0.95);
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      max-width: 200px;
      font-size: 0.9rem;
      z-index: 10;
    }

    #recentGames h3 {
      margin-top: 0;
      font-size: 1rem;
    }

    #recentGames ul {
      padding-left: 1rem;
      margin: 0;
    }

    #infoBtn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 10;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    #bottomLeftButtons {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      display: flex;
      gap: 0.75rem;
      align-items: center;
      z-index: 10;
    }

    .logo-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .logo-btn svg {
      width: 22px;
      height: 22px;
      fill: #333;
      transition: all 0.3s ease;
    }

    .logo-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
      background: rgba(255, 255, 255, 1);
    }

    .logo-btn:hover svg {
      fill: #0066cc;
      transform: scale(1.1);
    }

    #infoBtn:hover {
      transform: translateY(-2px);
      background: rgba(0, 0, 0, 0.9);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    /* Specific button colors */
    #githubBtn:hover {
      background: rgba(33, 31, 31, 0.95);
    }

    #githubBtn:hover svg {
      fill: #fff;
    }

    #mathBtn:hover svg {
      fill: #ff6b35;
    }

    #calculatorBtn:hover svg {
      fill: #28a745;
    }

    #settingsBtn:hover svg {
      fill: #6c757d;
    }

    #developerBtn:hover svg {
      fill: #007bff;
    }

    #infoBtn:hover::after {
      content: "go to https://onlinemathsclub.vercel.app/README.md for more info";
      position: absolute;
      bottom: 110%;
      left: 0;
      background: #000;
      color: #fff;
      padding: 0.5rem;
      font-size: 0.8rem;
      white-space: nowrap;
      border-radius: 0.25rem;
    }
    #recentList li {
  cursor: pointer;
  color: #0077cc;
}
#recentList li:hover {
  text-decoration: underline;
}