/* css taken and slightly modified from 
Devine Lu Linvega (Hundred Rabbits), 
https://wiki.xxiivv.com/site/home.html */

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  color: #000000
}

body {
  background: #ffffff;
  font-family: serif;
  font-size: medium;
  padding-bottom: 30px;
  max-width: 800px;
  margin: auto
}

body>*,
body main>*,
main figure>div>*,
main p,
main q,
main cite,
main pre {
  margin-bottom: 30px
}

body .right {
  float: right;
  margin-left: 30px
}

body a.self,
body a.parent {
  font-style: italic
}

::selection {
  background-color: #ffbb00;
  color: #000;
  text-decoration: none
}

main a:hover,
main a:hover>*,
nav a:hover,
nav main a:hover>* {
  background-color: #ffbb00;
  color: #ffffff;
  text-decoration: none
}

hr {
  clear: both;
  border: 0;
  margin: 0
}

pre {
  tab-size: 2
}

header {
  float: left;
  margin: 50px 30px;
  margin-right: 60px;
  font-size: x-large;
}

header img {
  display: block
}

nav {
  padding: 45px 30px;
  margin: 0
}

nav ul {
  padding: 0;
  margin: 0 45px 0 0;
  display: inline-block;
  vertical-align: top
}

nav ul li {
  list-style-type: none;
  white-space: pre
}

nav ul li a {
  padding: 0 4px
}

nav ul li a.parent,
nav ul li a.self {
  text-decoration: underline
}

main {
  margin: 20px;;
  max-width:624px;
  clear: both;
  position: relative
}

main a {
  text-decoration: underline;
  color: #ffbb00;
}

main a[target="_blank"] {
  text-decoration-style: dotted
}

main article {
  border-left: 1px dotted #000;
  padding-left: 25px;
  clear: both
}

main cite {
  display: block
}

main cite:before {
  content: "— "
}

main iframe {
  width: 100%
}

main h1,
main h2,
main h3,
main h4,
main h5 {
  font-family: monospace;
}

main ul {
  margin: 0 0 30px 30px;
  list-style-type: none;
}

main ol {
  margin: 0 0 30px 30px;
  list-style-type: disc;
}

main ul ul {
  margin-bottom: 0
}

main ul li,
main ol li {
  line-height: 25px;
  padding: 0 5px
}

main figure img,
main center img {
  display: block;
  margin: 0
}

main figure figcaption {
  padding: 15px 0
}

main figure:first-child {
  max-width: 100vw;
  margin-left: -30px;
  width: 800px
}

main figure:first-child figcaption {
  padding-left: 30px
}

main p {
  line-height: 160%
}

main sup {
  line-height: 12px;
  font-size: small;
}

main q {
  font-family: serif;
  font-size: 18px;
  font-style: italic;
  display: block;
  max-width: 400px
}

main img,
main svg {
  max-width: 100%;
  display: inline-block;
  margin: 0 0 25px
}

main pre {
  overflow: auto;
  background: #efefef;
  padding: 10px;
  font-size: 80%
}

main pre code,
main pre i {
  color: #888
}

main code {
  white-space: pre
}

main hr {
  clear: both
}

main kbd {
  font-size: 12px;
  display: inline-block;
  padding: 0 5px;
  font-weight: bold;
  border-radius: 4px;
  line-height: 20px;
  border: 2px solid #222
}

footer {
  clear: both;
  margin: 30px 30px 15px 30px;
  border-top: 1px dotted black;
  height: 60px;
  overflow: hidden;
  padding-top: 30px;
  line-height: 30px
}

footer * {
  height: 30px;
  display: inline-block;
  top: 0;
  position: relative;
  vertical-align: top
}

footer a {
  margin-right: 3px
}

footer a:hover {
  text-decoration: underline
}

footer img {
  height: 27px
}

footer div.right img {
  margin-right: 0
}

div.codeview {
  background: #eee;
  border-radius: 4px;
  overflow: hidden
}

div.codeview iframe {
  height: 405px;
  border: 0;
  margin: 0;
  display: block
}

div.codeview pre {
  margin: 0;
  background: #000;
  color: #fff
}

div.codeview pre.src {
  background: #efefef;
  color: #000
}

div.codeview pre a {
  float: right;
  color: #72dec2;
  text-decoration: none;
  font-weight: bold
}

@media (prefers-color-scheme:dark) {
  * {
    color: #fff
  }

  body {
    background: #000
  }

  main a:hover,
  main a:hover>*,
  nav a:hover,
  nav a:hover>* {
    background-color: #ffbb00;
    color: #000;
    text-decoration: none
  }

  input {
    color: #000
  }

  img[src*="svg"],
  img[src*="png"] {
    filter: invert(1) hue-rotate(180deg)
  }

  main pre {
    background: #111
  }

  main table {
    border-style: solid
  }

  main th,
  main td {
    border-style: dotted
  }

  main article {
    border-left-color: white
  }

  .nodark {
    filter: invert(0) hue-rotate(0deg) !important;
    background: transparent !important
  }

  footer {
    border-top-color: white
  }

  footer * {
    color: white
  }
}