body {
    margin: 40px;
}
.sidebarleft {
    grid-area: sidebarleft;
}
.sidebarright {
    grid-area: sidebarright;
}
.content {
    grid-area: content;
}
.header {
    grid-area: header;
}
.box {
    background-color: lightgrey;
    /* color: #ffffff; */
    border-radius: 5px;
    padding: 10px;
    /* font-size: 150%; */
}
.homeicon {
    grid-area: homeicon;
}
.headertitle {
    grid-area: headertitle;
}
.menuicon {
    grid-area: menuicon;
}
.hamburger {
    display: none;
}
.closehamburger {
    display: none;
}
.menuicondisplay {
    display: block;
}
.leftoptions {
    grid-area: leftoptions;
}
.rightoptions {
    grid-area: rightoptions;
}
.wrapperheader {
    margin: auto;
    display: grid;
    /* grid-gap: 1em; */
    grid-template-columns: 64px auto auto 32px;
    grid-template-areas: "homeicon headertitle headertitle menuicon"
                         "leftoptions leftoptions leftoptions leftoptions"
                         "rightoptions rightoptions rightoptions rightoptions"
}
.homeicon > a > img, .menuicon > a > img {
    height: 32px;
    width: auto;
}
.menuicon {
    visibility: visible;
}
.headertitle > h1 {
    margin: 0;
}
.leftoptions > a, .rightoptions > a {
    float: left;
    display: none;
    color: #f2f2f2;
    /* text-align: center; */
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1.25em;
    width: 100%
}
.displayoptions > a {
    display: block;
}
.leftoptions > a:hover, .rightoptions > a:hover {
    background-color: #ddd;
    color: #000;
}

.footer {
    grid-area: footer;
}

.footnote {
    text-align: center;
    padding: 10px;
}

.wrapper3col {
    background-color: #eeeeee;
    color: #444;
    margin: auto;
    display: grid;
    grid-gap: 1em;
    grid-template-areas: "header" "sidebarleft" "content" "sidebarright" "footer"
}
.wrapper2col {
    background-color: #eeeeee;
    color: #444;
    margin: auto;
    display: grid;
    grid-gap: 1em;
    grid-template-areas: "header" "content" "sidebarright" "footer"
}
.wrapper1col {
    background-color: #eeeeee;
    color: #444;
    margin: auto;
    display: grid;
    grid-gap: 1em;
    grid-template-areas: "header" "content" "footer"
}
@media only screen and (min-width: 500px) {
  .wrapper3col {
      grid-template-columns: 20% auto;
      grid-template-areas: "header   header" "sidebarleft  content" "sidebarright sidebarright" "footer   footer";
  }
  .wrapper2col {
      grid-template-columns: 20% auto;
      grid-template-areas: "header   header" "content  content" "sidebarright sidebarright" "footer   footer";
  }
  .wrapper1col {
      grid-template-columns: 20% auto;
      grid-template-areas: "header   header" "content  content" "footer   footer";
  }
}
@media only screen and (min-width: 600px) {
  .wrapper3col {
      grid-gap: 20px;
      grid-template-columns: 120px auto 120px;
      grid-template-areas: "header  header  header" "sidebarleft content sidebarright" "footer  footer  footer";
      /* max-width: 600px; */
  }
  .wrapper2col {
      grid-gap: 20px;
      grid-template-columns: auto 200px;
      grid-template-areas: "header  header" "content sidebarright" "footer  footer";
      /* max-width: 600px; */
  }
  .wrapper1col {
      grid-gap: 20px;
      grid-template-columns: auto;
      grid-template-areas: "header" "content" "footer  footer";
      /* max-width: 600px; */
  }
}
.box {
    background-color: #444;
    color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    /* font-size: 150%; */
}
.header,
.headertitle,
.footer {
    background-color: #8ebf42;
}
.sidebar2 {
    background-color: #ccc;
    color: #444;
}

@media screen and (min-width: 600px) {
    .wrapperheader {
        grid-template-areas: "homeicon headertitle headertitle menuicon"
                             "leftoptions leftoptions rightoptions rightoptions"
    }
    .menuicon {
        visibility: hidden;
    }
    .rightoptions {
        justify-self: end;
    }
    .leftoptions > a, .rightoptions > a {
        display: block;
        width: auto;
    }
}