/* Minor updates to standard HTML */
dt { font-weight: bold;
     margin-top: 2em;
    }
h2 { background:#DDDDFF; text-align:center }
h3 { background:#DDDDFF; text-align:left;
     font-family:arial;
}

table.center { margin-left:auto; margin-right:auto; }

/* Web page layout */
/* Define the sections */
.sidebar {
    grid-area: sidebar;
  }

.content {
    grid-area: content;
  }

.header {
    grid-area: header;
  }

.footleft {
    grid-area: footleft;
  }

.footright {
    grid-area: footright;
  }

/* */
.wrapper {
    background-color: #fff;
    color: #444;
  }

.wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "content"
     "sidebar"
     "footleft"
     "footright"

  }

 @media only screen and (min-width: 500px)  {
  .wrapper {
    grid-template-columns: minmax(20%,100px) auto;
    grid-template-areas:
    "header   header"
    "sidebar  content"
    "footleft   footright";
  }
 }

/*
  @media only screen and (min-width: 600px)   {
    .wrapper {
      grid-gap: 20px;
      grid-template-columns: 120px auto 120px;
      grid-template-areas:
      "header  header  header"
      "sidebar content content"
      "footer  footer  footer";
      max-width: 600px;
    }
  }
*/