html {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding-top: 2rem;
  overflow: auto;
  display: flex;
  color: #282828;
  /* color: #383838; */
}

h1 {
  margin-bottom: 0.2em;
}

h1,
.focus-areas {
  font-family: "Alegreya Sans";
}

.focus-areas {
  font-size: 120%;
}

p {
  max-width: 23em;
  margin-right: 1em;
  margin-left: 1em;
  font-family: "Crimson Text";
  text-align: justify;
}

p strong {
  font-weight: 700;
}

#page {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#about {
  border-top: 1px solid #d8d8d8;
  padding-top: 1em;

  max-width: 23em;
  margin: auto;
  margin-top: 1.5em;

  display: flex;
  flex-direction: column;
}

#about .copyright-notice {
  font-size: 80%;
  border-top: 1px solid #d8d8d8;
  padding-top: 1em;
  margin-top: 1.5em;
}

#about p {
  margin: 0;
  text-align: justify;
}

#about .left {
  margin-right: 2em;
}

#about .header {
  margin-bottom: 1em;
}

#about .content {
  font-size: 90%;
  display: flex;
  justify-content: space-between;
}