html {
  background-color: #ccc;
  color: #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  padding: 1rem;
  line-height: 1.25;
  font-size: 14px;
}

h1 {
  font-size: 1.2rem;
}

h2 {
  font-size: 1rem;
}

h3 {
  font-size: 0.85rem;
  letter-spacing: 0.1rem;
}

section {
  max-width: 46rem;
}

@media screen and (max-width: 800px) {
  pre {
    font-size: 0.6rem;
  }
}

.site-title a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  max-width: 100%;
}

.links a {
  color: inherit;
}
.links .active {
  font-weight: bold;
}

.links ul {
  list-style: none;
  padding: 0;
}

.links li {
  display: block;
}

.page {
  display: grid;
  grid-template-columns: 47rem auto;
  column-gap: 1rem;
  grid-template-rows: auto auto;
  grid-template-areas: "logo aside" "body aside";
}

.site-title {
  grid-area: logo;
}

.page > section {
  grid-area: body;
}

.page > aside {
  grid-area: aside;
}

@media screen and (max-width: 800px) {
  html {
    padding: 0.5rem;
  }
  .page {
    grid-template-columns: auto;
    column-gap: 1rem;
    grid-template-rows: auto;
    grid-template-areas: "logo" "aside" "body";
  }
  .links li {
    display: inline-block;
  }
}

.micro-meta {
  color: #555;
  font-size: 0.8rem;
}
.micro-meta a {
  color: inherit;
}

.micro-item + .micro-item {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #aaa;
}

blockquote {
    background: rgba(0, 0, 0, 0.05);
    padding: 1rem;
    border-left: 1px solid #000;
}

blockquote > *:first-child {
    margin-top: 0;
}

blockquote > *:last-child {
    margin-bottom: 0;
}

.answer-toggle {
    background-color: #e2d8ae;
}

.answer-toggle:before {
    content: '➜ ';
}

.answer-toggle-button {
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #aaa;
    background-color: #ccc;
    color: #333;
    border-radius: 0;
}

.answer-toggle-button.opened {
    margin-bottom: 0.75rem;
}

.page-actions {
    margin-top: 0.5rem;
    float: right;
}