main #container {
  display: grid;
  grid-template-columns: auto 15rem;
  column-gap: 2rem;
}

main #metadata {
  margin-bottom: 2rem;
}

main #metadata h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

main #metadata div {
  min-width: 100%;
  display: flex;
  column-gap: 2rem;
}

main #metadata div span {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
}

main #metadata div #share {
  display: none;
}

main #metadata #share {
  cursor: pointer;
}

main #content h2,
main #content h3,
main #content h4 {
  margin-bottom: 1rem;
}

main #content p,
main #content ul,
main #content ol,
main #content img,
main #content figure,
main #content .highlight {
  margin-bottom: 2rem;
}

main #content a {
  color: var(--crimson);
}

main #content .highlight pre,
main #content .highlight div {
  border-radius: 0.75rem;
}

main #content .highlight div {
  padding: 2rem 1rem;
}

main #content .highlight pre {
  padding: 0rem;
}

@media only screen and (max-width: 1024px) {
  main #metadata h1 {
    font-size: 2.5rem;
  }

  main #container {
    display: block;
  }

  main #container #table-of-contents {
    display: none;
  }

  main #metadata div {
    column-gap: 1rem;
  }

  main #metadata div #share {
    display: inline-flex;
  }
}