html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

body {
    max-width: 900px;
    margin: 100px auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    color: #24292f;
    background: #fff;
    padding: 2rem 300px;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

h1, h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid #d8dee4;
}

a {
    color: #0969da;
}

a.external::after {
  content: " ↗";
}

/* Inline code */
code {
    padding: 0.15em 0.35em;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    background: #f0f2f4;
    border-radius: 4px;
}

/* Code blocks */
pre {
    padding: 1rem;
    overflow-x: auto;
    background: #f6f8fa;
    border: 1px solid #d8dee4;
    border-radius: 6px;
    line-height: 1.45;
}

pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Admonitions / blockquotes */
blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    color: #424a53;
    background: #f6f8fa;
    border-left: 4px solid #818b98;
}

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

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

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid #d8dee4;
}

th {
    background: #f6f8fa;
}

/* Horizontal rule */
hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #d8dee4;
}

header {
  background: white url(logo.svg) no-repeat;
  background-size: 80px;
  background-position: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 100;
  border-bottom: 1px solid #d8dee4;
}

h1 .anchor,
h2 .anchor,
h3 .anchor,
h4 .anchor,
h5 .anchor,
h6 .anchor {
  color: #818b98;
  opacity: 0;
  text-decoration: none;
  margin-left: 0.3em;
  transition: opacity 0.2s;
/*   font-size: 90% */
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
  opacity: 1;
}

nav.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  padding-top: 100px;
  overflow-y: auto;
  box-sizing: border-box;
  resize: horizontal;
  background: #f6f8fa;
  border-right: 1px solid #d8dee4;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  padding: 0.2em 0.2em 0.2em 0.5em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

nav > ul {
  font-weight: bold
}

nav > ul > li {
  margin-left: 0.5em
}

nav a {
  display: block;
  color: #424a53;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

nav.main a.selected {
  color: #eaeef2;
  background-color: #424a53;
  font-weight: bold;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

nav.main ul ul {
  font-weight: normal;
  margin-top: 0.2em;
  padding-left: 1em;
}

nav.main ul ul a {
  color: #57606a;
}

@media (max-width: 800px) {
  nav.main {
    position: static;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid #d8dee4;
  }

  body {
    padding-left: 2rem;
  }
}

summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: bold
}

summary::before {
  content: "▸";
  margin: 0 0.5em;
}

details[open] > summary::before {
  content: "▾"
}

nav.main details > ul {
  margin-left: 0.5em
}

@media (max-width: 1100px) {
  nav.toc {
    display: none;
  }

  body {
    padding-right: 2rem;
  }
}

nav input[type="search"] {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.5rem 0.65rem;

  font: inherit;
  color: #24292f;
  background: #fff;

  border: 1px solid #d0d7de;
  border-radius: 6px;
  outline: none;
}

nav input[type="search"]:focus {
  border-color:  #24292f;
  box-shadow: 0 0 0 2px #0969da33;
}

nav.toc {
  position: fixed;
  top: 100px;
  right: 0;
  width: 220px;
  height: 100vh;
  padding: 2rem 1rem;
  overflow-y: auto;
  box-sizing: border-box;

  color: #57606a;
  background: #fff;
  border-left: 1px solid #d8dee4;
}

nav.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.toc li {
  margin: 0.2rem 0;
}

nav.toc a {
  display: block;
  padding: 0.2em 0.5em;
  color: #57606a;
  text-decoration: none;
  font-weight: normal;
}

nav.toc a:hover {
  color: #0969da;
}

nav.toc a.active {
  color: #0969da;
  border-left-color: #0969da;
}

/* Nested headings */
nav.toc ul ul {
  padding-left: 0.75rem;
}

nav.toc ul ul a {
  font-size: 0.85em;
}

#search-results {
  position: fixed;
  top: 100px;
  right: 1rem;
  z-index: 100;
  width: 500px;
  max-height: calc(100vh - 2rem);
  padding: 1rem;
  overflow-y: auto;

  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 6px;
  box-shadow: 0 8px 24px #1f232833;
}

#search-results:empty {
  display: none
}

#search-results a {
  display: block;
  padding: 0.6rem 0.75rem;

  color: #24292f;
  text-decoration: none;
  border-radius: 4px;
}

#search-results a:hover {
  background: #f6f8fa;
}

#search-results strong,
#search-results mark {
  color: inherit;
  background: #fff8c5;
}

::highlight(search) {
  background: #fff8c5;
}

/* ----------------------------------------------------------------------- */
.hljs-type {
  color: #0055ff;
  font-weight: bold;
}

.hljs-title.function_ {
  color: #c24db0;
  font-weight: bold;
}

.language-yaml .hljs-attr, .language-json .hljs-attr {
  color: #0055ff;
  font-weight: bold;
}