a:hover {
  text-decoration: underline;
}

.collage {
  padding: 0.5em 0;
  margin: -0.5em;
  text-align: center;
}

.collage img, .collage video {
  border-radius: 4px;
  box-shadow: 0 0 8px;
  max-width: min(calc(100% - 0.5em), 2992px);
  max-height: min(90vh, 2992px);
  vertical-align: middle;
  margin: 0.375em 0.25em;
  object-fit: scale-down;
}

.content {
  padding: 0.25em 0;
}

.toc {
  display: inline-block;
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.04);
  padding: 0.6em 0.8em;
}
@media (prefers-color-scheme: light) {
  .toc {
    background-color: rgba(0, 0, 0, 0.06);
  }
}
ol.toc {
  padding-left: 1.8em;
}

.nav-link {
  font-weight: 800;
}

.caption-pic {
  display: inline-block;
  vertical-align: middle;
  padding: 1em;
  margin: 0.5em;
  background-color: rgba(196, 128, 92, 0.04);
  border-radius: 1em;
}
@media (prefers-color-scheme: light) {
  .caption-pic {
    background: rgba(32, 32, 64, 0.06);
  }
}

.text {
  margin: auto;
  max-width: 800px;
}

.callout {
  font-size: smaller;
  padding: 0.6em 1em;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.3em;
}
@media (prefers-color-scheme: light) {
  .callout {
    border-color: rgba(0, 0, 0, 0.2);
  }
}

.collage img.v2, .collage video.v2 {
  max-width: min(max(440px, 30vw), 100% - 0.5em);
  max-height: 50vh;
}