body {
  background: #eee;
}

p {
  margin-bottom: 0.8rem;
}

a:visited {
  color: #302ecd;
}

div#__next {
  /* Bump down the page to leave room for header. */
  /* position: relative; top: 1.5rem; */
  /* Allow page to stretch to length. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header. */
header {
  /* TODO: fix the fixed header.
    Problem is it covers the section header when clicking anchor links.
    Traditional solutions don't work because the section headers have padding
    and I want to avoid wrapping them in superfluous tags.
  */
  /* position: fixed; top: 0; */
  height: 1.5rem;
  width: 100%;

  box-sizing: border-box;
  padding: 0.1rem 1rem;

  background: #777;
  color: #eee;
}
header a,
header a.active,
header a:active,
header a:focus,
header a:hover {
  color: #b7b6ef !important;
}

/* Breadcrumbs */
header nav > div {
  display: inline-block;
}
header nav > div:after {
  content: '\2022';
  margin: 0 0.5rem;
}
header nav > div:last-child:after {
  content: none;
}

.font-mono {
  font-family: 'Consolas', monospace;
}

.text-console {
  /* Material UI Darker colors */
  /* color: #f0ffff; */ /* white */
  color: #ffd276; /* yellow */
  /* color: #8db3ff; */ /* blue */
  background: #252525;
}

.params-table th {
  padding: 0 0.4rem;
  font-size: 0.7rem;
}
.params-table td {
  vertical-align: top;
}

ul.snug {
  margin-top: -1em;
}

ul.inline-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.inline-list li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.inline-list li:after {
  content: ', ';
}
ul.inline-list li:last-child:after {
  content: none;
}

ul.nav-list {
  list-style: none;
}
ul.nav-list .method span.verb {
  display: inline-block;
  width: 2.5rem;
  margin-right: 0.5rem;
  font-size: 0.6rem;
  font-weight: bold;
  text-align: right;
  text-decoration: inherit;
}
ul.nav-list .link a {
  margin-left: 3rem;
}

.api-doc h3 {
  font-size: 1rem;
  font-weight: bold;
  margin: 1em -0.25em 0.5em -0.25em;
  padding: 0.25em;
  background: #ddd;
}
.api-doc h4 {
  font-size: 0.8rem;
  margin: 0.5em 0;
  padding: 0.25em;
  background: #e0e0e0;
}
.api-doc h3,
.api-doc h4 {
  transition-property: background, color;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
}
.api-doc h3:target,
.api-doc h4:target {
  background: #5755d9;
  color: white;
}

.label code {
  background: none;
  color: inherit;
}