style.css

@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
* {
  font-family: Product Sans;
}

html {
  width: 100%;
  /* 100% width of parent (root) element */
  height: 100vh;
  /* 100% height of viewport */
  /* background: rgb(0, 0, 0, 0.1); */
  /* 10% opacity black (very light gray) */
  font-size: 1.0em;
  /* our root font size */
}

body {
  margin: 0;
  /* content goes to edge of viewport */
  height: 100vh;
  /* and spans height of viewport */
}

div.container {
  min-height: 25rem;
  /* mainbody height never squishes < 25rem */
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns:
      [left] 10rem auto 10rem [right];
  grid-template-rows:
      [top] 5rem auto 5rem [bottom];
  grid-template-areas:
      "head head head"
      "panleft mainbody panright"
      "foot foot foot";
}

div.header {
  /* background: rgb(0, 0, 0, 0.2); */
  /* 20% black */
  grid-area: head;
  /* head corresponds to name in template */
}

div.footer {
  /* background: rgb(0, 0, 0, 0.2); */
  grid-area: foot;
}

div.panel {
  overflow-x: auto;
  /* div elements with "panel" class */
  /* background: rgb(0, 0, 0, 0.1); */
  /* 10% black */
}

div.panel.left {
  /* with both "panel" and "left" class */
  grid-area: panleft;
}

div.panel.right {
  grid-area: panright;
}

div.mainbody {
  grid-area: mainbody;
  /* width: 30rem; */
  overflow-x: auto;
  text-align: justify;
  text-justify: inter-word;
  border-top: 0%;
  /* mainbody width is fixed */
  /* justify-self: center; */
  /* and always centered in grid area */
}

@media screen and (max-width: 50rem) {

  /* if viewport width < 50rem */
  div.panel.left {
      grid-column-end: left;
      /* left panel stops at left edge */
  }

  div.panel.right {
      grid-column-start: right;
      /* right panel starts at right edge */
  }

  div.panel {
      display: none;
      overflow-x: auto;
      /* neither panel is displayed */
  }

  div.mainbody {
      grid-column-start: left;
      overflow-x: auto;
      /* mainbody starts at left edge */
      grid-column-end: right;
      /* mainbody ends at right edge */
  }
}