/* PAGE BACKGROUND */
    body {
      margin: 0;
      height: 100vh;

      /* centers the app on the page */
      display: flex;
      justify-content: center;
      align-items: center;

      background-color: #8f8f8f;

      /* clean app-style font */
      font-family: Arial, Helvetica, sans-serif;
    }

    /* MAIN APP SCREEN */
    .app-screen {
      background-color: #A9A9A9;
      width: 320px;
      padding: 30px 20px;

      /* creates the 2-column layout */
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      /* spacing between boxes */
      gap: 40px 35px;
    }

    /* SHARED STYLING FOR ALL CLUB BOXES */
    .club-card {
      width: 100px;
      height: 100px;

      border-radius: 14px;

      /* soft shadow like the mockup */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

      /* centers text inside each box */
      display: flex;
      justify-content: center;
      align-items: center;

      text-align: center;

      font-weight: bold;
      font-size: 13px;
      line-height: 1.3;

      color: black;
    }

    /* INDIVIDUAL CARD COLORS */
    .stem {
      background-color: #efc4c4;
  
    }

    .art {
      background-color: #d7d6ef;
    }

    .theater {
      background-color: #e3ecd9;
    }

    .debate {
      background-color: #f3f0d9;
    }

    .dnd {
      background-color: #ead2ea;
    }

    .chess {
      background-color: #dceff2;
    }