html {
  scrollbar-gutter: stable;
  margin: 0.5em 1em;
}

body {
  color: #252525;
  font-family: sans-serif;
  margin: 0px auto;
  max-width: 41em;
}

h1, h2 {
  border-bottom: 1pt solid #888888;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }

.title {
  border-bottom: 1pt solid #888888;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  font-size: 2em;
  font-family: serif;
}

footer {
  border-top: 1pt solid #888888;
  margin: 1em 0px;
  padding-top: 1em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
  font-weight: 300;
}

header {
  margin: 1em 0px;
  text-align: left;
}

header ul.links {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -.5em 0px;
}

header ul.links>li {
  flex: 1;
  list-style: none;
  text-align: center;
}

header ul.links>li a {
  color: #252525;
  display: block;
}

article {
  margin: 1em 0px;
  text-align: left;
}

a {
  color: #4070c0;
  text-decoration: none;
}

a:visited {
  color:#4007c0;
}

a:hover {
  color:#cc0f50;
  text-decoration: underline;
}

footer {
  clear: both;
  text-align: center;
}

pre {
  white-space: pre-wrap;
  font-family: monospace;
  background-color: #f4f4ff;
  color: #000000;
}

pre {
  padding: 1em;
  margin-left: 0em;
  overflow: auto;
  border-radius: 4pt;
}

th, td {
  text-align: center;
  padding: 0.25em;
  border: 1px solid #888888;
  vertical-align: center;
}

.l {
  text-align: left;
}

.r {
  text-align: right;
}

.c {
  text-align: center;
}

table {
  border-collapse: collapse;
  margin: 1em auto;
}

pre .prompt {
  user-select: none;
}

blockquote {
  border-left: #d0d0ff 4pt solid;
  padding: 4pt;
  margin: 1em 0px;
}

img {
  display: inline-block;
}

img[alt="erai bunny profile picture"] {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 0px solid #000000;
  border-radius: 1em;
}

p {
  text-align: justify;
  line-height: 125%;
}

@media (max-width: 550px) {
  .row {
    display: block;
  }
}

@media (min-width: 550px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }
}

.col {
  flex: 1;
  align-self: center;
}

.pad {
  padding: 1em 2em;
}

.linkboard {
  margin: 0.75em 0px;
}

.nogrow {
  flex-grow: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #202020;
    color: #eeeeee;
  }

  code, pre {
    background-color: #1e1e33;
    color: #eeeeee;
  }

  header ul.links>li a {
    color: #eeeeee;
  }

  a {
    color: #8ea5cc;
  }

  a:visited {
    color: #8466cc;
  }

  th, td {
    border: 1px solid #888888;
  }
}