.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 5px;
  padding: 0px;
}
.container > div {
  padding: 10px;
}
.container > div.header {
  width: 100%;
  color: white; 
  grid-area: header;
  background-color: black;
  background-size: cover;
  vertical-align: middle;
  text-align: center;
}
.container > div.menu {
  grid-area: menu;
  background-color: lightgrey;
}
.container > div.content {
  grid-area: content;
}
.container > div.footer {
  grid-area: footer;
  text-align: center;
}
.logo {
  float: left;
  padding: 10px 10px 10px 25px;
}
.liwide {
  margin: 10px 0;
}
.foot1 { font: 10pt Arial, sans-serif; color: gray; text-align: left; }
.foot2 { font: 10pt Arial, sans-serif; color: gray; text-align: center; }
.foot3 { font: 10pt Arial, sans-serif; color: gray; text-align: right; }
.copyright { font: 10pt Arial, sans-serif; color: gray; }

/* NEW */
.hanging-indent {
  padding-left: 2em; /* Indents all lines after the first */
  text-indent: -2em; /* Moves the first line back to the left */
}
.centertable {font:  10pt Arial,sans-serif; color: gray
             margin-left: auto; margin-right: auto;}
.lefttd     {text-align:center; vertical-align: middle; width:33%; padding:4px}
.midtd      {text-align:center; vertical-align: middle; width:33%; padding:4px;}
.righttd    {text-align:center; vertical-align: middle; width:33%; padding:4px;}
/* END NEW */


@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "menu"
      "content"
      "footer";
    grid-template-columns: 1fr;
  }
}