h1   {font-family: "Brush Script MT";}
h2   {font-family: monospace ;}
h3   {font-family: monospace;}
h4   {font-family: monospace;}
h5   {font-family: monospace;}
h6   {font-family: monospace;}
p    {font-family: sans-serif;}
a    {font-family: monospace ;}

body {
  background-image: url('Artboard 1.png');
  
}
  .container {
    display: grid;
    grid-template-areas:
      "header header header"
      "under under under"
      "menu-left content menu-right"
      "footer footer footer";
    grid-template-columns: 3fr 5fr 3fr;
    gap: 3px;
    padding: 8px;
    background-color: #ab6a26; /*#8f6d24*/
  }

  .container > div {
    background-color: white;
    padding: 5px;
  }

  .header     { grid-area: header; 
                text-align: center; }
  .menu-left  { grid-area: menu-left; 
                text-align: center; }
  .menu-right { grid-area: menu-right;
                text-align: center; }
  .content    { grid-area: content; }
  .footer     { grid-area: footer;
                text-align: center; }

  /* --- UNDER HEADER (SUBGRID) --- */
  .under {
    grid-area: under;
    display: grid;
    grid-template-columns: 3fr 5fr 3fr;
    gap: 3px;
    padding: 4px 8px;
    font-size: 0.9rem;        /* smaller text */
    align-items: center;      /* vertically centers items */
  }

  .under > div {
    background-color: transparent; /* blend with bar */
  }

  .under-left   { text-align: left; }
  .under-center { text-align: center; }
  .under-right  { text-align: right; }

  /* --- link styling --- */
  .under a {
    text-decoration: none;
    color: #00b3b3;
    font-weight: 500;
    margin: 0px 6px;
  }
  .under a:hover {
    text-decoration: underline;
  }
 .under a:visited {
  color: #006666;
   
 }

  /* RESPONSIVE HEADING */
  @media screen and (min-width: 700px) {
    .center {
      max-width: 70vw;    /* change max width of page */
      margin: auto;
      padding: 1%;
      text-align: center;
    }
    .center > div2 {
      color: white;
    }
  }