main #container {
  display: grid;
  grid-template-columns: auto minmax(15rem, 20rem);
  column-gap: 2rem;
}

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

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 ul,
main #content ol,
main #content .highlight {
  margin-bottom: 2rem;
}

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 #container {
    display: block;
  }

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

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

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