h1 {
  text-align: center;
}
h2 { 
  font-size: 125%;
  font-weight: bold;
}
h3 {
  font-size: 110%;
  font-weight: bold;
}
h4 {
  font-size: 100%;
  font-weight: bold;
}
.page-grid {
  display: grid;
  grid-template-areas: 
  '. title'
  'nav body';
  grid-template-columns: 1fr 8fr;
  grid-template-rows: auto 1fr;
  max-width: 1000px;
  grid-gap: 1em;
  margin: 0 auto;
}
.container {
  max-width: 1000px;
  grid-area: body;
  margin: 0 auto;
} 
.title {
  grid-area: title;
  text-align: center;
  color: #333;
  padding: 2em;
}
.nav {
  grid-area: nav;
  width: 100%;
}
.nav label, #hamburger {
  display: none;
}
.nav ul li a {
  color: inherit;
  text-decoration: none;
}
.nav ul {
  list-style: none
}
.nav li:hover{
  color: white;
}
.nav ul li {
  display: block;
}
.flex-grid { 
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 8px;
}
.flex-grid > div {
  font-size: 100%;
}
.flex-grid a {
  color: black;
  text-decoration: none;
}
.flex-grid a:hover {
  color: black;
  text-decoration: underline;
}
.next-prev-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20%;
}
.next-prev-grid > div {
  font-size: 100%;
} 
.next-prev-grid > div.left {
  text-align: left;
} 
.next-prev-grid > div.right {
  text-align: right;
} 
#list-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 8px;
}

#list-grid > div {
  font-size: 100%;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5em;
}
.about-grid > div {
  font-size: 100%;
  text-align: left;
}
.sketch-grid {
  display: grid;
  grid-template-areas: 
  "header header header"
  "content content content";
  "links links links"
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 2em;
}
.sketch-grid > div {
  font-size: 100%;
  text-align: left;
}
.sketch-grid a {
  color: black;
}
.nav-home-link{
  display:block;
  padding:.5rem 1rem;
  color:white;
}
.nav-home-link:focus, .nav-home-link:hover{
  text-decoration:none;
  color: gray;
}
.nav-home-link.disabled{
  color:#6c757d;
  pointer-events:none;
  cursor:default
}
.font-125 {
  font-size: 125%;
  color: black;
  font-weight: bold;
}
.font-125:focus, .font-125:hover{
  color: black;
}
.nav-button {
  color: black;
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  padding-left: 8px;
  width: 9em;
  text-decoration: none;
  display: block;
}
.nav-button:focus, .nav-button:hover {
  background-color: black;
  text-color: white;

}
.button {
  background-color: white;
  color: black;
  border: 1px solid #212529;
}
.black-link a {
  color: black;
  font-size: 100%
}
img {
  max-width: 100%;
}
figure {
  font-style: italic;
  font-size: smaller;
}
input {
  width: 80%;
}
textarea {
  width: 80%;
  height: 16em;
}
@media all and (max-width: 775px){
  .page-grid {
    display: grid;
    grid-template-areas:
    'nav'
    'title'
    'body';
    grid-template-columns: 100%;
    margin: 0 0.5em;
  }
  .nav label {
    display: block;
    font-color: #fff;
    padding: 16px;
    margin: 0;
  }
  .nav ul li {
    display: block;
    padding-left: 16px;
  }
  .nav ul {
    display: none;
  }
  .nav input:checked ~ ul {
    display: inline-block;
  }
  .home-grid {
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }
  .flex-grid {
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }
  #list-grid {
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }
  .sketch-grid {
    grid-template-areas:
    "header"
    "content"
    "links";
    grid-template-columns: 1fr;
    grid-gap: 8px;
  }
  input {
    width: 100%;
  }
  textarea {
    width: 100%;
    heigth: 16em;
  }
}