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"
  }
  
  html, body {
    height: 100%;
    color: black;
    
  }
  
  main p {
    font-family: "Copperplate", sans-serif;
    font-size: 18px;
  }
  
  
  header {
    text-align: center;
    font-family: 'Copperplate', sans-serif;
    grid-area: header;
    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: center;
    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: auto;
    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 8px 8px 8px;
    font-size: 20px;
    color: #232931;
    display: block;
  }
  
  .sideNavBar a:hover {
    color: #bfbfbf;
  }
  
  main {
    margin: 0;
    grid-area: body;
  }
  
  main.container {
    grid-area: body;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  } 
  
  .container {
    text-align: center;
  }
  
  .container p {
    font-size: 20px;
  }
  
  footer {
    margin-top: 5%;
    margin-bottom: 10px;
    color: #EEEEEE;
    text-align: center;
    grid-area: footer;
  }

  .button-wrapper {
    display: block;
    justify-content: center;
    align-items: center;
    height: 100%; /* Optional: or a fixed height like 300px */
    margin: 50px;
    padding: auto;
  }
  
  .view-plan-button {
    padding: 20px 40px;
    font-size: 24px;
    background-color: #ff7300;
    color: #232931;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Copperplate', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .view-plan-button:hover {
    background-color: #e26500;
  }