/* CSS for the main page with dark mode toggle and button grid */
/* Dark Mode Toggle and Button Grid Styles */
  :root {
    --bg: #f0f0f0;
    --text: #333;
    --btn-bg: #007BFF;
    --btn-hover: #0056b3;
  }

  body.dark {
    --bg: #121212;
    --text: #eee;
    --btn-bg: #1e90ff;
    --btn-hover: #0d6efd;
  }

  body {
    font-family: Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    text-align: center;
    margin: 0;
    padding-top: 50px;
    transition: background-color 0.3s, color 0.3s;
  }

  h1 {
    margin-bottom: 10px;
  }

  .toggle-dark {
    margin-bottom: 30px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: var(--btn-bg);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }

  .toggle-dark:hover {
    background-color: var(--btn-hover);
    transform: scale(1.2);
  }

  .button-container {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    gap: 20px;
    max-width: 1000px;
    margin: auto;
    padding: 0 20px;
  }

  .btn {
    display: block;
    padding: 15px 0;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    background-color: var(--btn-bg);
    border-radius: 10px;
    box-shadow: 0 14px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s, box-shadow 0.3s ease;
  }

  .btn:hover {
    background-color: var(--btn-hover);
    transform: scale(1.2);
  }

  /* Dark mode glowing effect */
  body.dark .btn {
    background-color: var(--btn-bg);
    box-shadow:
      inset 0 0 10px rgba(0, 136, 255, 0.6),
      0 0 6px rgba(0, 136, 255, 0.4);
  }

  body.dark .btn:hover {
    background-color: var(--btn-hover);
    transform: scale(1.2);
    box-shadow:
      inset 0 0 14px rgba(0, 170, 255, 0.8),
      0 0 10px rgba(0, 170, 255, 0.6);
  }

  /* Responsive columns
  @media (max-width: 900px) {
    .button-container {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 600px) {
    .button-container {
      grid-template-columns: repeat(1, 1fr);
    }
  } */