body {
  color: rgba(0,0,0,0.65);
  font-family: Georgia, serif;
  font-weight: 300;
  margin: 100px 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: rgba(0,0,0,0.85);
  text-decoration: none;
}

h1 {
  font-family: Helvetica, sans-serif;
  font-size: 2.2em;
  font-weight: 300;
  line-height: 1;
}

hr {
  border-color: rgba(0,0,0,0.2);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: rgba(0,0,0,0.9);
    color: rgba(255,255,255,0.65);
  }

  a {
    color: rgba(255,255,255,0.85);
  }

  hr {
    border-color: rgba(255,255,255,0.2);
  }
  .footer .item .link .icon {
    fill: rgba(255,255,255,0.6) !important;
  }
}

.flex {
  display: flex;
  justify-content: center;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.content {
  min-width: 300px;
  max-width: 500px;
}

.headshot {
  display: none;
  overflow: hidden;
  max-width: 500px;
}

.headshot picture {
  background-color: #fff;
  margin-top: calc(4.4em/3);
  height: 250px;
  width: 250px;
}

.headshot picture img {
  height: 250px;
  width: 250px;
}

@media screen and (min-width: 1200px) {
  .headshot {
    display: block;
  }
}

.footer {
  height: 18px;
  list-style: none outside;
  padding: 0;
  text-align: center;
}

.footer .item {
  display: inline-block;
  height: 18px;
  margin: 0 10px;
}

.footer .item .link {
  display: inline-block;
}

.footer .item .link .icon {
  display: block;
  height: 18px;
  fill: rgba(0,0,0,0.6);
}