body {
      background-color: #f8f9fa;
    }

    .app-container {
      max-width: 500px;   /* limit width on large screens */
      margin: auto;
    }

    .app-btn {
      height: 18vh;       /* responsive height */
      min-height: 120px;
      font-size: 1.6rem;
      font-weight: 600;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #333;
      transition: all 0.2s ease-in-out;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .app-btn:hover {
      transform: scale(1.02);
      box-shadow: 0 6px 18px rgba(0,0,0,0.2);
      color: #000;
    }

    /* Mid colors for buttons */
    .btn-mid-blue   { background-color: #5a9bf6; color: white; }
    .btn-mid-green  { background-color: #4ac18d; color: white; }
    .btn-mid-red    { background-color: #f56c6c; color: white; }
    .btn-mid-yellow { background-color: #f9d16b; color: black; }

    /* Optional hover effects */
    .btn-mid-blue:hover,
    .btn-mid-green:hover,
    .btn-mid-red:hover,
    .btn-mid-yellow:hover {
        filter: brightness(110%);
        text-decoration: none;
        color: inherit;
    }