/*
Color
*/
:root {
  --brand-stroke-color: hsl(50, 90%, 50%);
  --brand-text-color: hsl(50, 93%, 48%);
  --figure-drop-color: var(--highlight-color);
  --figure-stroke-color: rgba(0,0,0,.2);
  --hair-stroke-color: rgba(0,0,0,.15);
  --header-background: hsl(40, 30%, 12%);
  --header-stroke-style: none;
  --header-text-color: white;
  --header-text-muted-color: rgba(255,255,255,.6);
  --highlight-color: rgba(0,0,0,.1);
  --link-stroke-color: hsl(50, 95%, 50%);
  --link-stroke-color--hover: hsl(40, 95%, 45%);
  --page-color: white;
  --text-color: rgba(0,0,0,.8);
  --text-display-color: black;
  --text-muted-color: rgba(0,0,0,.4);
  --thin-stroke-color: rgba(0,0,0,.25);
}

/*
Type
*/
:root {
  --font-family: Georgia, serif;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Avenir, Noto, sans-serif;
  --font-family-decorative: var(--font-family-sans);
  --font-family-display: var(--font-family-sans);
  --font-family-caption: var(--font-family-sans);
  --font-family-interface: var(--font-family-sans);
  --font-family-text: var(--font-family);
  --font-size: 16px;
  --font-size-base: var(--font-size);
  --font-size-text: var(--font-size);
  --font-size-title: calc(1.25 * var(--font-size));
  --font-size-decorative: calc(3 * var(--font-size));
  --font-size-heading: calc(1.25 * var(--font-size));
  --font-size-subhead: calc(0.85 * var(--font-size));
  --font-size-caption: calc(0.85 * var(--font-size));
  --font-size-micro: calc(0.75 * var(--font-size));
  --line-height: 1.4;
  --line-height-base: calc(var(--font-size) * var(--line-height));
  --line-height-heading: 1.2;
  --reading-measure: calc(35 * var(--font-size-base));
  --type-space-fifth: calc(0.2 * var(--line-height-base));
  --type-space-half: calc(0.5 * var(--line-height-base));
  --type-space-single: calc(1 * var(--line-height-base));
  --type-space-double: calc(2 * var(--line-height-base));
  --type-space-tad: calc(1 * var(--line-height-base));
  --type-space-dash: calc(0.5 * var(--line-height-base));
  --type-space-pinch: calc(0.25 * var(--line-height-base));
  --type-space-smidgen: calc(0.125 * var(--line-height-base));
}
@media all and (min-width: 35em) {
  :root {
    --font-size: 18px;
    --font-size-title: calc(2 * var(--font-size));
    --line-height: 1.5;
    --line-height-heading: 1.3;
    --type-space-tad: calc(2 * var(--line-height-base));
    --type-space-dash: calc(1 * var(--line-height-base));
    --type-space-pinch: calc(0.5 * var(--line-height-base));
    --type-space-smidgen: calc(0.25 * var(--line-height-base));
  }
}
@media all and (min-width: 45em) {
  :root {
    --font-size: 20px;
    --line-height: 1.55;
  }
}

/*
Decoration
*/
:root {
  --figure-drop-offset: .5em -.5em 0;
  --link-stroke-width: 1px;
  --link-stroke-width-heading: 2px;
}
@media all and (min-width: 35em) {
  :root {
    --link-stroke-width: 2px;
    --link-stroke-width-heading: 3px;
  }
}
@media all and (min-width: 45em) {
  :root {
    --figure-drop-offset: .5em .5em 0;
  }
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Avenir, Noto, sans-serif;
  color: #333;
  font-size: 18px;
}

body {
  padding: 0;
  margin: 0;
}

.page {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin: 0 auto;
}

.page__title {
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.content {
  padding: 1rem;
  flex: auto;
  min-width: 0;
}

.sidebar {
  width: 280px;
  flex: none;
  border-right: 1px solid #ddd;
  padding: 1.3rem 0 1rem;
}

.sidebar a, .sidebar a:hover {
  box-shadow: none;
  text-shadow: none;
}

.nav {

}

.nav__heading {
  padding: 0 1rem;
}

.nav__items {
  padding: 0;
}

.nav__item {
  list-style: none;
}

.nav__item a {
  display: block;
  padding: 0.5rem 1rem;
}

.nav__item a:hover {
  background: #eee;
}

.nav__item--active a {
  background: #eee;
  color: inherit;
  text-decoration: none;
}

.brand {
  text-decoration: none;
  color: #333;
  display: block;
  margin: 0 0 1rem 0;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0 1rem;
}

.code {
  width: 100%;
  overflow: auto;
}

.code pre {
  margin: 0;
  font-size: 15px;
}

.variant__title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.4em;
}

.variant__section + .variant__section {
  margin-top: 2rem;
}

.variant__sectionTitle {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  color: #777;
}

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}

.hljs-string,
.hljs-doctag {
  color: #d14;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}

.hljs-subst {
  font-weight: normal;
}

.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.hljs-regexp,
.hljs-link {
  color: #009926;
}

.hljs-symbol,
.hljs-bullet {
  color: #990073;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}

.hljs-meta {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}