html, body {
  min-height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 100%;
  line-height: 1.2;
  color: #666;
  background: #fff;
  display: flex;
  justify-content: center;
}

#outer-frame {
  width: min(640px, 100%);
  min-height: 100vh;
  box-sizing: content-box;
  border-width: 2px;
  border-color: #999;
  border-style: none solid;
  padding: 8px;
}

#inner-frame > header {
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 2px solid #999;
  line-height: 1;
}
#inner-frame > header > h1 {
  margin: 0;
}
#inner-frame > header *.squished {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#inner-frame > header *.squished > h1 img {
  height: 100%;
  width: auto;
}
#inner-frame > header > #toggleSidecab {
  width: 160px;
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
  float: right;
  cursor: pointer;
  font-size: 120%;
}
#inner-frame > header > *.breadcrumbs {
  padding-top: 4px;
  margin-top: 4px;
  border-top: 2px solid #999;
}
#inner-frame > header > *.breadcrumbs a {
  text-decoration: none;
}
#inner-frame.resizeable {
  border-right: 6px double #000;
}

section {
  border-width: 2px;
  border-color: #999;
  border-style: solid none;
}
section + section {
  border-top: none;
}

#sidecab {
  border-right: 2px solid #999;
  display: none;
}

@media (max-width: 720px) {
  body {
    padding: 4px;
  }
  #inner-frame {
    width: 100%;
    min-width: inherit;
    border: none;
  }
}
h1 {
  margin: 0 0 1em;
  font-size: 1.6em;
  font-weight: normal;
}

p {
  margin: 0.5em 0 1.4em;
}
p:last-child {
  margin-bottom: 0;
}

ul {
  list-style-type: square;
}

*.hug-next {
  margin-bottom: 0;
}
*.hug-next + * {
  margin-top: 0;
}

*.subtle {
  font-size: 66%;
}

*.centerpiece {
  position: relative;
  z-index: 10;
}

*[class*=language-] {
  white-space: pre-wrap;
  max-width: 640px;
  margin: 0 auto;
}

ul.nav, ul.nav ul {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  vertical-align: middle;
  align-items: stretch;
}
ul.nav ul, ul.nav ul ul {
  margin-top: 4px;
  font-size: 80%;
}
ul.nav li, ul.nav ul li {
  color: #666;
  background: #eee;
  border: 2px solid #999;
  margin: 0;
  padding: 4px;
  transition-property: color, background-color, border-width, margin;
  transition-duration: 0.333s;
}
ul.nav li:hover, ul.nav ul li:hover {
  background: #666;
  color: #fff;
}
ul.nav li:group, ul.nav ul li:group {
  background-color: #fafafa !important;
}
ul.nav li:group:hover, ul.nav ul li:group:hover {
  background-color: #eee !important;
}
ul.nav li:active, ul.nav ul li:active {
  border-width: 4px;
  margin: -2px;
}
ul.nav li + li, ul.nav ul li + li {
  margin-left: 4px;
}
ul.nav li + li:active, ul.nav ul li + li:active {
  margin-left: calc( 4px - 2px );
}
ul.nav li > a, ul.nav ul li > a {
  display: flex;
  align-items: center;
  width: 100%;
}
ul.nav li > a:link, ul.nav li > a:visited, ul.nav ul li > a:link, ul.nav ul li > a:visited {
  color: inherit;
  text-decoration: inherit;
}
ul.nav li > a:only-child, ul.nav ul li > a:only-child {
  height: 100%;
  padding: 2px 6px;
}

*.items > *:first-child {
  margin-top: 0;
}
*.items > *.item {
  margin: 0;
  padding: 1em 0;
}
*.items > *.item:hover {
  background-color: #fafafa;
}
*.items > *.item + * {
  border-top: 2px dotted #999;
}
*.items > *.item > *:first-child {
  margin-top: 0;
}

*.blocks {
  display: block;
  list-style: none;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border-width: 1px;
  border-style: none solid solid;
  border-color: #999;
}
*.blocks > * {
  padding: 2px 4px;
  border-top: 1px solid #999;
  color: #fff;
  background: #666;
}
*.blocks *.blocks {
  border-style: none;
}
*.blocks *.blocks > * {
  margin-left: -4px;
  margin-right: -4px;
  color: #666;
  background: #fff;
}
*.blocks *.blocks > * + * {
  border-top-color: #999;
}
*.blocks a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: inherit;
}

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