html {
  font-family: "Helvetica", sans-serif;
  color: MintCream;
}

body {
  background-color: ForestGreen;
  margin: 0px;
  font-size: 1.25rem;
}

h1 {
  margin: 0.5rem 0px 0.5rem 0px;
}
h2 {
  margin: 0.5rem 0px 0.5rem 0px;
}
p {
  color: MintCream;
}
img {
  width: auto;
  max-width: 70%;
  border-radius: 25px;
  margin-left: auto;
  margin-right: auto;
}
figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container {
  display: grid;
  grid-template-areas:
  "header header header"
  "content content content"
  "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto auto auto;
  padding: 0px;
  height:100%;
}
.container div.header {
  grid-area: header;
  display: flex;
  justify-content: center;
  padding: 1vh 0;
  position: sticky;
  top: 0;
  z-index: -1;
  white-space: nowrap
}
.container div.menu {
  grid-area: menu;
}
.container div.content {
  grid-area: content;
  display: flex;
  width:100vw;
  justify-content: center;
}
.container div.spacer {
  grid-area: spacer;
}
.container div.footer {
  grid-area: footer;
  text-align: center;
  padding: 2px;
}
figcaption {
  font-style: italic;
}
div.contentbox {
  background-color: DarkGreen;
  min-width: 16rem;
  width: 100vh;
  padding: 2rem 4rem;
  border-radius: 4rem 4rem 0rem 0rem;

}
code {
  background-color: Black;
  padding: 1rem;
  border-radius: 1rem;
  display:block;
}
@media (max-width: 100vh) {
  div.contentbox {
    border-radius: 0rem;
  }
  div.contentbox {
    padding: 1rem 2rem;
  }
}
@media (max-width: 75vh) {
  body {
    font-size: 1rem;
  }
}