body {
  font-family: normalArial, Tahoma, Helvetica, FreeSans, sans-serif;
}

h1 {
  color: #3399bb;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
  margin: 1em;
}

#byline {
  color: #777777;
  margin: 1em 2em;
}

a:not(:hover) {
  text-decoration: none;
}

#main {
  display: flex;
}

@media (max-width: 1000px) {
  #main {
    flex-direction: column-reverse;
  }
}

#nav {
  flex: 0 0 calc(min(50%, 14rem));
  margin: 0 2em;
}

#nav ul {
  margin: 0;
  padding-left: 20px;
}

#nav li {
  margin: 4px 0 4px 0;
  list-style-type: none;
}

details > details {
  margin-left: 1em;
}

.separator {
  margin: 1em 2em;
  height: 1px;
  background-color: lightgray;
}

.vertical-separator {
  margin: 0 1em;
  width: 1px;
  background-color: lightgray;
}

#body {
  flex: 1;
  max-width: 40rem;
}

.post {
  margin-bottom: 2em;
}

.date {
  font-style: italic;
}

.comment {
  margin: 1em 0 1em 1em;
}

.comment > .author {
  font-weight: bold;
}

.comment > .content {
  white-space: pre-wrap;
}

}