body {
      font-family: 'Segoe UI', 'Arial', sans-serif;
      background: #1e1f22;
      margin: 0;
      padding: 0;
    }
    h1, h2, h3 {
      margin: 0;
      font-weight: 700;
    }
    .main-title {
      text-align: center;
      margin-bottom: 32px;
    }
    .cs-card-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto;
    }

    .card {
      flex: 0 0 calc(33.333% - 2em); /* Three per row */
      box-sizing: border-box;
      max-width: 300px;
      min-width: 220px;
      margin: 0;
      text-decoration: none;
      transition: transform 0.15s, box-shadow 0.18s;
    }

    .card:hover .card-box {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 0 30px #1e293b80;
    }
    .card-box {
      border-radius: 16px;
      padding: 24px;
      width: 100%;
      text-align: center;
      box-shadow: 0 0 15px #dbeafe;
      transition: transform 0.15s, box-shadow 0.18s;
    }
    /* Individual background colors for each card */
    .card:nth-child(1) .card-box { background: #253a53; }
    .card:nth-child(2) .card-box { background: #163261; }
    .card:nth-child(3) .card-box { background: #334721; }
    .card:nth-child(4) .card-box { background: #603d0b; }
    .card:nth-child(5) .card-box { background: #452359; }
    .card:nth-child(6) .card-box { background: #0f4653; }
    /* Shadows for each card */
    .card:nth-child(1) .card-box { box-shadow: 0 0 15px #dbeafe; }
    .card:nth-child(2) .card-box { box-shadow: 0 0 15px #c7d2fe; }
    .card:nth-child(3) .card-box { box-shadow: 0 0 15px #bef264; }
    .card:nth-child(4) .card-box { box-shadow: 0 0 15px #fcd34d; }
    .card:nth-child(5) .card-box { box-shadow: 0 0 15px #e9d5ff; }
    .card:nth-child(6) .card-box { box-shadow: 0 0 15px #bae6fd; }
    /* Two rows, three columns for desktop: cards auto-wrap */
     @media (min-width: 900px) {
      .cs-card-grid {
        gap: 2em;
      }
      .card {
        flex: 0 1 300px;      /* Make the cards a fixed width for consistency */
        max-width: 320px;
      }
    }

    /* Responsive stacking */
    @media (max-width: 900px) {
  .cs-card-grid {
    gap: 1em 0.5em;
  }
  .card {
    flex-basis: 95%;
    max-width: 98vw;
    min-width: 180px;
  }
}

    .example-section {
      margin: 42px auto 16px auto;
      max-width: 700px;
      background: #000000;
      padding: 24px 32px;
      border-radius: 20px;
      box-shadow: 0 0 10px #ede9fe;
      color: #fafafa;
    }
    .game-section {
      margin: 32px 0;
      text-align: center;
    }
    .site-links {
      margin: 24px 0;
      text-align: center;
    }
    .site-links a {
      font-size: 1.3em;
      font-weight: 500;
      color: #2a7ae2;
      margin: 8px 0 0 0;
      display: inline-block;
      text-decoration: none;
    }
    /* Misc small image */
    .octocat-img {
      width: 80px;
      margin: 12px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    /* Extra for cards */
    .card img {
      height: 84px;
      margin-bottom: 6px;
    }
    .card-box h2 {
      margin: 16px 0 0 0;
      font-size: 1.4em;
      color: #fff;
      font-weight: 600;
    }