html, body {
    height: 100%;
    margin: 0;
    background-color: #474950;
  }
  
body {
    margin: 0;
    background-color: #474950;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows:200px 1fr auto;
    grid-template-areas: 
      "logo header"
      "navBar body"
      "navBar footer"
  }
  
  header {
    text-align: center;
    grid-area: header;
    font-family: 'Copperplate', sans-serif;
    background-color: #6a6c78;
  }
  
  header hgroup h1 {
    font-size: 3em;
    font-family: 'Copperplate', sans-serif;
    color: #232931;
  }
  
  header hgroup p {
    font-size: 2em;
    font-family: 'Copperplate', sans-serif;
    color: #232931;
  }
  
  #logo {
    margin: auto;
    text-align: left;
    grid-area: logo;
    max-width: 197px;
    max-height: 197px;
  }
  
  .logo-container {
    grid-area: logo;
    background-color: #474950; /* Match header background */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sideNavBar {
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    background-color: #ff7300;
    overflow-x: hidden;
    grid-area: navBar;
    font-family: 'Copperplate', sans-serif; /* 👈 Font type */
    font-size: 22px;     
  }
  
  .sideNavBar a {
    padding: 8px;
    font-size: 20px;
    color: #232931;
    display: block;
  }
  
  .sideNavBar a:hover {
    color: #bfbfbf;
  }
  
  main.container {
    grid-area: body;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  
  footer {
    color: #EEEEEE;
    text-align: center;
    grid-area: footer;
  }

  .download-buttons {
    display: flex;
    flex-wrap: wrap;              /* Enable wrapping into multiple rows */
    gap: 20px;                    /* Space between buttons */
    justify-content: center;     /* Center buttons horizontally */
    align-items: center;
    font-family: 'Copperplate', sans-serif;
    margin-top: 20px;
    max-width: 800px;             /* Optional: Controls when wrapping occurs */
    margin-left: auto;
    margin-right: auto;
  }
  
  .download-buttons button {
    background-color: #6a6c78;
    color: #232931;
    border: none;
    padding: 20px 30px;           /* Adjusted size for more elegant spacing */
    font-size: 20px;
    font-family: 'Copperplate', sans-serif;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    flex: 1 1 40%;                /* Allow ~2 buttons per row depending on container size */
    box-sizing: border-box;
    min-width: 250px;             /* Prevents shrinking too much on small screens */
    text-align: center;
  }
  
  .download-buttons button:hover {
    background-color: #ff7300;
    color: #000000;
  }