html {
  background-color: #909090;
  color: #101010;
  font-family: "STIX Two Text", serif;
  font-optical-sizing: auto;
}

body {
  display: flex;
  flex-wrap: wrap;
}

header {
  padding: 5pt;
  margin-right: 20pt;
  margin-bottom: 20pt;
}

main {
  padding: 5pt;
  flex: 2 0.25 200pt;
  max-width: min(800pt, 100%);
  box-sizing: border-box;
}

pre, code {
  font-family: monospace;
  font-optical-sizing: auto;
}

pre {
  overflow-x: auto;
}

nav > ol, ol.blank, ul.blank {
  padding: 0;
}

nav > ol > li > ol {
  padding-left: 10pt;
}

nav > ol > li, nav > ol > li > ol > li, ol.blank > li, ul.blank > li {
  list-style-type: none;
}

span.current {
  padding-left: 1pt;
  padding-right: 1pt;
  background-color: #101010;
  color: #909090;
}

::selection {
  background-color: #101010;
  color: #909090;
}

a:link {
  padding-left: 1pt;
  padding-right: 1pt;
  color: #101010;
}

a:visited {
  text-decoration-style: dotted;
  color: #101010;
}

a:hover, a:focus, a:active {
  background-color: #101010;
  color: #909090;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
}

div.gallery > div {
  margin-right: 5pt;
  margin-bottom: 5pt;
  background-size: cover;
  background-position: center;
  width: 200pt;
  height: 200pt;
  position: relative;
  border: 1pt solid #101010;
}

h1 {
  margin-top: 0;
}