@custom-selector :--header h1, h2, h3, h4, h5, h6;

/*
Use `border-box` properly:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  background-color: color(var(--color-menu));
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-body);
  line-height: var(--line-height);
}

a {
  color: inherit;
  text-decoration: inherit;
}

:--header {
  font-weight: inherit;
  font-size: calc(1em * 7 / 5);
  line-height: calc(var(--line-height) * 5 / 7);
  padding-top: calc(var(--line-height) * 4 * (5 / 7));
  margin-top: calc(var(--line-height) * -2 * (5 / 7));
  margin-bottom: calc(var(--line-height) * 1 * (5 / 7));
}

:--header a.anchor {
  color: var(--color-light);
  margin-left: calc(1em * 1 / 2);
  text-decoration: none;
}

p, ul, ol, pre, table, blockquote {
  margin: 0 0 calc(var(--line-height) * 1);
}

ul, ol {
  padding: 0 0 0 1em;
}

li p {
  margin: 0;
}

li pre {
  margin: calc(var(--line-height) * 1 / 2) 0;
}

blockquote {
  color: var(--color-alt);
  border-left: 3px rgba(0, 0, 0, 0.125) solid;
  padding-left: calc(1em * 2 / 3);
}

pre, code {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
}

pre {
  padding: calc(var(--line-height) * 1 / 2 - 1px);
  margin: calc(var(--line-height) * 3 / 2) 0;
  background: var(--color-pre);
  border: 1px rgba(0, 0, 0, 0.06) solid;
  border-radius: var(--border-radius);
  line-height: var(--mono-height);
  overflow: auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  position: relative;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) inset;
  width: 100%;
}

table td, table th {
  padding:
    calc(var(--line-height) * 1 / 3)
    calc(var(--line-height) * 2 / 3);
}

table th {
  hyphens: none;
  white-space: nowrap;
  background-color: var(--color-pre);
}

tbody code {
  background: none;
  padding: 0;
}

tbody tr:nth-of-type(2n) {
  background-color: var(--color-pre);
}

header {
  background-color: color(var(--color-literal) lightness(- 8%) saturation(- 12%));
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
}

header > div {
  min-width: var(--min-width);
  max-width: var(--max-width);
  margin: 0 auto;
}

header > div::after, main::after {
  display: block;
  content: ' ';
  clear: both;
}

header .logo-type {
  display: block;
  height: calc(var(--line-height) * 3 / 2);
  margin: calc(var(--line-height) * 1 / 2) 0;
  padding: 0 1em 0 calc(var(--line-height) * 3 / 2);
  float: left;
}

header .corner {
  display: block;
  position: relative;
  width: calc(var(--menu-width) + 1px);
  float: right;
  padding: calc(var(--line-height) * 3 / 4) calc(var(--line-height) * 3 / 2);
  color: var(--color-pre);
}

header .corner::after {
  content: '\272a';
  float: right;
  opacity: calc(1 / 2);
}

main {
  position: relative;
  min-width: var(--min-width);
  max-width: var(--max-width);
  margin: 0 auto;
  /*border-right: 1px rgba(0, 0, 0, 0.08) solid;*/
}

article {
  background: var(--color-background);
  max-width: calc(100% - var(--menu-width));
  padding: calc(var(--line-height) * (5 / 2)) calc(var(--line-height) * (7 / 2)) 0 calc(var(--line-height) * 3 / 2);
  hyphens: auto;
  float: left;
  position: relative;
}

article::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  width: 500em;
  height: 100%;
  background: var(--color-background);
}

article > h1:first-of-type {
  margin-top: 0;
}

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

nav {
  float: right;
  width: var(--menu-width);
  position: relative;
}

nav > div {
  position: fixed;
  background: var(--color-menu);
  top: calc(var(--line-height) * (5 / 2));
  width: var(--menu-width);
  height: calc(100% - var(--line-height) * 2);
  padding: 0 calc(var(--line-height) * 3 / 2);
  overflow: auto;
  border-left: 1px rgba(0, 0, 0, 0.04) solid;
}

nav hr {
  height: calc(var(--line-height) * 2);
  padding: 0;
  margin: 0;
  border: none;
}

nav ul {
  margin: 0;
}

nav h4 {
  color: var(--color-alt);
}

nav .version {
  text-transform: none;
  font-weight: normal;
}

nav h4,
.api h6,
article > h1:first-of-type {
  position: relative;
  font-family: inherit;
  font-weight: bold;
  font-size: calc(1em * 3 / 4);
  line-height: calc(var(--line-height));
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: calc(var(--line-height) * 2 * 4 / 3);
  padding-bottom: calc(var(--line-height) * 1 / 4 * 4 / 3);
  margin-bottom: calc(var(--line-height) * 1 / 4 * 4 / 3);
}

nav h4::before,
.api h6::before,
article > h1:first-of-type::before {
  content: ' ';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  /*background: rgba(0, 0, 0, 0.12);*/
}

article > h1:first-of-type {
  margin-bottom: calc(var(--line-height) * 3 / 2 * 8 / 7);
}

article > h1:first-of-type + h2,
article > h1:first-of-type + h3 {
  margin-top: calc(var(--line-height) * -3 * (5 / 7));
}

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

nav li {
  color: var(--color-link);
}

nav li:last-of-type {
  padding: 0;
}

nav li::before {
  content: '\2022';
  color: var(--color-light);
  margin-right: calc(1em / 3);
}

footer {
  margin: calc(var(--line-height) * 5) 0 0;
  padding: 0 0 calc(var(--line-height) * 1);
  color: var(--color-alt);
}

footer a {
  color: inherit;
}
