@charset "UTF-8";
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  padding: 0;
}

:root {
  --font-stack:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --font-stack-code:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-background:#f9f9f9;
  --color-text:#363636;
  --color-text-muted:#888;
  --color-link:#0076d1;
  --color-link-alt:#0d96ff;
  --color-redlink:#d10000;
  --color-nav:#efefef;
  --color-nav-active:#e8e8e8;
  --color-code:#e8e8e8;
  --color-code-name:#e45649;
  --color-code-string:#50a14f;
  --color-code-function:#4078f2;
  --color-code-keyword:#a626a4;
  --color-code-constant:#986801;
  --color-code-attribute:#b76b01;
  --color-code-builtin:#cb7701;
  --color-code-operator:#0184bc;
  --color-code-comment:#727272;
  --color-hr:#d8d8d8;
  --color-table-stripe:#e8e8e8;
  --color-tip:#e7fdb8;
  --color-tip-accent:#5ac54f;
  --color-note:#cffeff;
  --color-note-accent:#0098dc;
  --color-caution:#fff4a5;
  --color-caution-accent:#ffc825;
  --color-version:#ebb8fd;
  --color-version-accent:#8d54a1;
  --color-selection:#ddd ;
}

html {
  scrollbar-color: #bdbdbd transparent;
}

body {
  margin: auto;
  /*max-width:1000px;*/
  padding: 20px;
  background-color: var(--color-background);
  font-family: var(--font-body, var(--font-stack));
  line-height: 1.4;
  color: var(--color-text);
}

.wrapper-content {
  width: calc(100% - 250px);
  padding-left: 15px;
}

.wrapper-nav {
  flex-direction: column;
  display: flex;
  width: 250px;
  height: min-content;
  background-color: var(--color-nav);
}

main {
  margin-bottom: 4rem;
}

footer {
  display: flex;
  color: var(--color-text-muted);
}

#footer_right {
  margin-left: auto;
}

@media (min-width: 960px) {
  html {
    margin-left: calc(100vw - 100%);
  }
}
@media (min-width: 769px) {
  .wrapper-content {
    position: relative;
    left: 250px;
  }
  .wrapper-nav {
    position: fixed;
    max-height: calc(100% - 40px);
  }
}
@media (max-width: 768px) {
  body {
    margin: 0 auto;
    padding: 0;
  }
  .wrapper {
    width: 100%;
  }
  .wrapper-content {
    padding: 15px;
  }
}
pre {
  overflow: auto;
  margin: 0 0 1rem;
  border-radius: 6px;
  padding: 1rem;
  background-color: var(--color-code);
  font-size: 0.875em;
  white-space: pre;
}

code {
  font-size: 0.875em;
  font-family: var(--font-code, var(--font-stack-code));
  word-break: normal;
}

pre code {
  font-size: inherit;
}

/* inline code */
code.highlighter-rouge {
  border-radius: 3px;
  padding: 1px 5px;
  background-color: var(--color-code);
}

.nt, .gh, .si, .se {
  color: var(--color-code-name);
}

.dl, .s, .s1, .s2, .sb, .sc, .nl, .sr {
  color: var(--color-code-string);
}

.nx, .nf, .nn, .nc, .ss, .sx {
  color: var(--color-code-function);
}

.k, .kd, .kn, .kp, .kr, .ge {
  color: var(--color-code-keyword);
}

.kc, .m, .mf, .mh, .mi, .il, .mo, .mx, .mb, .nv, .kt, .nd, .gs, .py, .no {
  color: var(--color-code-constant);
}

.na {
  color: var(--color-code-attribute);
}

.nb {
  color: var(--color-code-builtin);
}

.o {
  color: var(--color-code-operator);
}

.c, .cm, .cp, .c1 {
  color: var(--color-code-comment);
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 1rem;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5rem;
  font-family: var(--font-heading, var(--font-stack));
}

h1 {
  font-weight: 700;
  font-size: 2rem;
}
h1:first-child {
  margin-top: 0;
}

h1:first-of-type {
  border-bottom: 1px solid var(--color-hr);
  padding-bottom: 0.75rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5, h6 {
  font-size: 0.9rem;
}

h6 {
  font-style: italic;
  color: var(--color-text-muted);
}

small {
  font-size: 80%;
}

a {
  text-decoration: none;
  color: var(--color-link);
}

a:hover {
  text-decoration: underline;
}

main ul, main ol {
  margin-bottom: 1rem;
  counter-reset: step-counter;
}
main li {
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  padding-left: 2rem;
  list-style: none;
}
main li ol, main li ol *, main li ul, main li ul * {
  margin: 0.25rem 0;
}

main ol li ol {
  counter-reset: sub-counter;
}

main ul li:before {
  content: "•";
  position: absolute;
  margin-left: -2rem;
  color: var(--color-text-muted);
}

main ol li:before {
  content: counter(step-counter) ".";
  position: absolute;
  margin-left: -2rem;
  color: var(--color-text-muted);
  counter-increment: step-counter;
}

ol li ol li:before {
  content: counter(sub-counter, lower-alpha) ".";
  counter-increment: sub-counter;
}

#markdown-toc {
  padding-top: 1.75rem;
}

#markdown-toc:before {
  content: "table of contents";
  position: absolute;
  margin-top: -1.75rem;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1.5rem;
  font-style: italic;
}

table {
  margin-bottom: 0.5rem;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

th, td {
  padding: 6px;
  text-align: left;
}

th {
  border-bottom: 1px solid var(--color-hr);
}

tr:nth-child(2n) {
  background-color: var(--color-table-stripe);
}

img {
  margin-bottom: -0.5rem;
  max-width: 100%;
}

hr {
  margin: 1.5rem 0 0.75rem 0;
  border-bottom: 1px solid var(--color-hr);
}

.tip, .note, .caution, .version {
  padding: 0.5rem 1.5rem;
}
.tip:before, .note:before, .caution:before, .version:before {
  font-weight: bold;
}

.tip {
  border-left: 4px solid var(--color-tip-accent);
  background-color: var(--color-tip);
}

.tip:before {
  content: "tip: ";
}

.note {
  border-left: 4px solid var(--color-note-accent);
  background-color: var(--color-note);
}

.note:before {
  content: "note: ";
}

.caution {
  border-left: 4px solid var(--color-caution-accent);
  background-color: var(--color-caution);
}

.caution:before {
  content: "caution: ";
}

.version {
  border-left: 4px solid var(--color-version-accent);
  background-color: var(--color-version);
}

.version:before {
  content: "recent changes: ";
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 8px;
  background: #bdbdbd;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #999999;
  background-clip: content-box;
}

::selection {
  background-color: var(--color-selection);
}

nav a, #site_title {
  display: inline-block;
  width: 100%;
}
nav a:hover, #site_title:hover {
  background-color: var(--color-nav-active);
  text-decoration: none;
}

#nav_content {
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

nav {
  overflow-y: auto;
}

nav li {
  line-height: 1.5rem;
  word-break: break-word;
  list-style: none;
}

nav li a, nav li.category {
  padding: 0.25rem 1rem;
}

nav li.category {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

nav hr {
  margin: 0 auto;
  width: 90%;
}

.active {
  background-color: var(--color-nav-active);
}

#invis {
  display: none;
}

#toggle {
  float: right;
  display: none;
  width: 48px;
  height: 48px;
}

#site_title {
  padding-left: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 3rem;
  color: var(--color-text);
}

#versions {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  line-height: 1.5rem;
}

#versions a {
  display: inline-block;
  width: initial;
  color: var(--color-link-alt);
}
#versions a:not(:last-child) {
  margin-right: 0.5rem;
}

#versions a.redlink {
  cursor: help;
  color: var(--color-redlink);
}

@media (max-width: 768px) {
  #nav_content {
    display: none;
  }
  nav li a, nav li.category {
    padding: 0.5rem 1rem;
  }
  #toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  #toggle:hover {
    background-color: var(--color-nav-active);
  }
  #site_title {
    width: calc(100% - 48px);
  }
  #invis:checked ~ #nav_content {
    display: block;
  }
}
.love {
  color: #db3ffd;
}

.caps:first-letter {
  text-transform: uppercase;
}

/*# sourceMappingURL=lifeblood.css.map */