html {
  font: var(--text-caption);
  /* color: var(--color-foreground-1); */
}

body {
  margin: 0;
  /* Sensible default font */
  font: var(--text-body-bold);
}

.doc {
  max-width: var(--max-width);
  margin: var(--row-gap-1) auto;
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content" "sidebar";
  -moz-column-gap: var(--column-gap-2);
       column-gap: var(--column-gap-2);
  row-gap: var(--row-gap-2);
  justify-content: space-between;
}

@media (min-width: 900px) {

.doc {
    grid-template-columns: 275px minmax(0, 1fr);
    grid-template-areas: "sidebar content";
}
  }

.doc-navbar {
  grid-area: sidebar;
  position: sticky;
  top: 100px;
  align-self: start;
}

@media (min-width: 900px) {

.doc-navbar {
    overflow-y: auto;
    max-height: calc(100vh - 110px);
}
  }

.doc-navbar .button.is-codesandbox {
    margin-top: 2em;
  }

.doc-navbar-section {
  border-top: 1px solid var(--color-background-2);
}

.doc-navbar-section > summary {
    display: block;
    cursor: pointer;
    outline: 0;
    list-style: none;
    border-radius: var(--border-radius);
  }

:is(.doc-navbar-section > summary)::-webkit-details-marker {
      display: none;
    }

.doc-navbar-section[open] .doc-navbar-section-title {
    color: var(--color-foreground);
  }

:is(.doc-navbar-section[open] .doc-navbar-section-title)::before {
      transform: rotate(90deg);
    }

.doc-navbar-section-title {
  display: flex;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
  padding: 10px 0;
  font: var(--text-caption-bold);
  transition: background-color var(--animation-duration);
  color: var(--color-foreground-1);
}

.doc-navbar-section-title:hover {
    background-color: var(--color-background-1);
  }

.doc-navbar-section-title::before {
    content: "";
    display: block;
    opacity: 0.5;
    width: 30px;
    height: 30px;
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="31" height="31" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg"><path d="M10.337 4.793a1 1 0 0 1 1.32-.083l.094.083 10 10a1 1 0 0 1 .083 1.32l-.083.094-10 10a1 1 0 0 1-1.497-1.32l.083-.094L19.63 15.5l-9.292-9.293a1 1 0 0 1-.083-1.32l.083-.094Z" fill="%23999"/></svg>')
      no-repeat center center;
    background-size: 20px 20px;
    transition: transform var(--animation-duration);
  }

.doc-navbar-section-links {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font: var(--text-caption);
}

.doc-navbar-section-links li + li {
    margin-top: 1px;
  }

.doc-navbar-section-links a {
    display: block;
    padding: 0.5em 0.5em 0.5em 35px;
    color: var(--color-foreground-1);
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: background-color var(--animation-duration);
  }

:is(.doc-navbar-section-links a):hover {
      background-color: var(--color-background-1);
      color: var(--color-foreground);
    }

[aria-current="page"]:is(.doc-navbar-section-links a) {
      background-color: var(--color-background-2);
      color: var(--color-foreground);
      font: var(--text-caption-bold);
    }

:is(.doc-navbar-section-links a) .tag {
      float: right;
    }

.doc-navbar > .doc-navbar-section-links a {
  padding-left: 1em;
}

.doc-content {
  grid-area: content;
}

.doc-header {
  /* border-bottom: solid 1px var(--color-background-2); */
  padding-bottom: var(--row-gap-0);
  margin-bottom: var(--row-gap-1);
  position: relative;
}

.doc-header h1 {
    font: var(--text-heading);
    letter-spacing: var(--text-heading-spacing);
    margin: 0;
  }

.doc-header p {
    font: var(--text-body);
    letter-spacing: var(--text-body-spacing);
    color: var(--color-foreground-1);
    margin: 0.3em 0 0;
  }

.doc-body {
  font: var(--text-body);
  letter-spacing: var(--text-body-spacing);
  color: var(--color-foreground);
}

.doc-body h2 {
    color: var(--color-foreground);
    font: var(--text-title);
    letter-spacing: var(--text-title-spacing);
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;
    border-bottom: solid 1px var(--color-background-2);
  }

:is(.doc-body h2):first-child {
      margin-top: 0;
    }

.doc-body h3 {
    color: var(--color-foreground);
    font: var(--text-body-bold);
    letter-spacing: var(--text-body-spacing);
    margin-top: 2.5em;
    margin-bottom: 0.5em;
  }

:is(.doc-body h3):first-child {
      margin-top: 0;
    }

:is(.doc-body h2,.doc-body h3) a::before {
      content: "¶";
      color: transparent;
      font-size: 0.8em;
      position: absolute;
      margin-left: -1em;
      margin-top: 4px;
    }

:is(.doc-body h2,.doc-body h3) a:hover::before {
      color: var(--color-background-3);
    }

:is(.doc-body h2,.doc-body h3):target a::before {
      color: var(--color-background-3);
    }

:is(.doc-body h2,.doc-body h3):target a:hover::before {
      color: var(--color-foreground-1);
    }

.doc-body .header-anchor {
    color: inherit;
    text-decoration: none;
  }

.doc-body .header-aside-link {
    font: var(--text-caption-bold);
    letter-spacing: var(--text-body-spacing);
    float: right;
    display: flex;
    align-items: center;
    -moz-column-gap: 0.5em;
         column-gap: 0.5em;
  }

.doc-body h2 + h3 {
    margin-top: 0;
  }

.doc-body strong {
    font-weight: 600;
  }

.doc-body code {
    background: var(--color-background-1);
    padding: 0 0.3em;
    border-radius: var(--border-radius-small);
    border: solid 1px var(--color-background-2);
    margin: 0 0.2em;
  }

.doc-body pre code {
    margin: 0;
  }

.doc-body p,.doc-body li {
    margin: 0.5em 0;
  }

.doc-body lume-code,.doc-body > pre {
    margin-top: 2em;
    margin-bottom: 2em;
  }

.doc-body dt {
    font-weight: 600;
  }

.doc-body dd + dt {
    margin-top: 1em;
  }

.doc-footer {
  padding: var(--row-gap-0) 0;
  border-top: solid 1px var(--color-background-2);
  margin-top: var(--row-gap-1);
}

.doc-pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  font: var(--text-caption);
}

.doc-pagination > li.is-next {
    margin-left: auto;
    text-align: right;
  }

.doc-pagination a {
    color: var(--color-foreground-1);
    text-decoration: none;
    display: block;
  }

:is(.doc-pagination a) strong {
      color: var(--color-primary);
      font: var(--text-body-bold);
      display: block;
    }

:is(.doc-pagination a):hover strong {
      text-decoration: underline;
    }

.doc-related {
  margin-top: var(--row-gap-1);
}

.doc-related h2 {
    font: var(--text-body-bold);
  }

.doc-related ul {
    font: var(--text-caption);
  }