@font-face {
    font-family: "Open Sans";
    src: url(OpenSans-VariableFont_wdth\,wght.ttf);
/* Base Reset */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans";
  background-color: #fdfdfd;
  color: #222;
  font-size: 16pt;
}

.container {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-areas:
    "left main right"
    "footer footer footer";
  min-height: 100vh;
}

/* Grid Areas */
.left-nav {
  grid-area: left;
  background: #eee;
  padding: 1rem;
}

.main-body {
  grid-area: main;
  background: #fff;
  padding: 1rem;
}

p {
    padding-bottom: 0.2em;
    text-indent: 3em;
}

.right-nav {
  grid-area: right;
  background: #eee;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background: #ddd;
  padding: 1rem;
  text-align: center;
}

/* Responsive: Stack layout for narrow screens */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "left"
      "right"
      "footer";
  }
}

h1 {
    font-weight: normal;
    font-size: 16pt;
    text-indent: 3em;
}