body {
  background-color: #eee;
  color: #111;
  text-align: center;
  /*min-width: 42em;*/
  font: 100% helvetica, arial, sans-serif; }

/* Small screens */
@media screen and (max-width: 799px) {
  header h1 {
    display: none; }
  #initial {
    display: block; }
  .article-image {
    display: none; } }

/* Larger screens */
@media screen and (min-width: 800px) {
  body {
    min-width: 42em; }
  header {
    width: 100%; }
  #initial {
    display: none; }
  #wrapper {
    width: 42em;
    margin: 3em auto auto; }
  footer {
    width: 42em;
    margin-left: auto;
    margin-right: auto; }
    footer p {
      background-color: rgba(238, 238, 238, 0.8);
      display: inline-block;
      padding: 0.5em; }
  .article-image {
    display: block; }
  .article-description {
    height: 6em; } }

h1, h2, h3 {
  font-weight: 400;
  color: #4c4c4c; }

#auth {
  display: none; }

#wrapper {
  background-color: #fff;
  text-align: left;
  /*margin: 3em auto auto;*/
  padding: 0; }
  #wrapper header {
    background-color: #111;
    position: relative;
    top: 0;
    height: 2.75em;
    padding-top: .25em;
    margin: 0; }
    #wrapper header a, #wrapper header a:link, #wrapper header a:visited {
      text-decoration: none;
      color: #4c4c4c;
      display: block; }
    #wrapper header h1 {
      text-align: left;
      padding-left: 3em;
      font-size: 120%;
      margin-top: .5em; }
  #wrapper #initial {
    font-style: normal;
    width: 1.125em;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    font-size: 2em;
    position: absolute;
    border: 3px double #4c4c4c;
    text-align: center;
    height: 1.125em;
    color: #4c4c4c; }
    #wrapper #initial a, #wrapper #initial a:link, #wrapper #initial a:visited {
      text-decoration: none;
      color: #4c4c4c;
      display: block; }
  #wrapper nav {
    height: 3em;
    position: relative;
    float: right;
    overflow: hidden;
    top: -3em; }
    #wrapper nav a, #wrapper nav a:visited {
      color: #111;
      text-decoration: none; }
    #wrapper nav ul {
      list-style: none;
      padding-left: 0;
      margin-top: 0;
      font-size: 80%; }
    #wrapper nav ul li {
      height: 2.9em;
      background-color: #AAA;
      float: left;
      text-align: center;
      padding: 1.25em .75em; }
    #wrapper nav ul li:hover {
      background-color: #4c4c4c; }
  #wrapper main {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3em;
    padding-bottom: .75em;
    /* Don't indent the first paragraph in the main div */ }
    #wrapper main a {
      color: #4c4c4c; }
    #wrapper main a:hover {
      color: #AAA;
      text-decoration: none; }
    #wrapper main a:visited {
      color: #AAA; }
    #wrapper main blockquote {
      margin-left: 5em;
      color: #4c4c4c;
      font-size: 85%;
      text-indent: 0; }
    #wrapper main table {
      font-size: 90%;
      border-collapse: collapse;
      border-top: 1px solid #4c4c4c;
      border-bottom: 1px solid #4c4c4c; }
      #wrapper main table th {
        border-bottom: 1px solid #4c4c4c; }
      #wrapper main table th, #wrapper main table td {
        padding: 0.2em; }
    #wrapper main p.code, #wrapper main code, #wrapper main pre.code {
      font-family: Consolas, Monaco, monospace;
      text-indent: 0; }
    #wrapper main pre.code, #wrapper main code {
      white-space: pre-wrap; }
    #wrapper main p.code, #wrapper main pre.code {
      padding: 0.33em;
      color: #657b83;
      /* Base00: body text  */
      background-color: #fdf6e3;
      /* Base 3: background */
      /* emphasized content */
      /* comments, secondary content */
      /* background highlights */ }
      #wrapper main p.code .Base03, #wrapper main pre.code .Base03 {
        color: #002b36; }
      #wrapper main p.code .Base02, #wrapper main pre.code .Base02 {
        color: #073642; }
      #wrapper main p.code .Base0, #wrapper main pre.code .Base0 {
        color: #839496; }
      #wrapper main p.code .Base01, #wrapper main pre.code .Base01 {
        color: #586e75; }
      #wrapper main p.code .Base1, #wrapper main pre.code .Base1 {
        color: #93a1a1; }
      #wrapper main p.code .Base2, #wrapper main pre.code .Base2 {
        color: #eee8d5; }
    #wrapper main dd {
      font-size: 85%;
      padding-top: 0.5em;
      padding-bottom: 1.8em;
      margin-left: 0;
      color: #4c4c4c; }
    #wrapper main dl {
      list-style: none;
      padding-left: 1.5em; }
    #wrapper main dt {
      font-size: 90%; }
    #wrapper main img {
      padding-right: 1em;
      max-width: 100%; }
    #wrapper main li {
      padding-top: .5em;
      padding-bottom: .25em;
      margin-left: 0; }
    #wrapper main p {
      line-height: 160%;
      text-indent: 2em;
      font-size: 90%; }
    #wrapper main pre {
      font-size: 90%; }
    #wrapper main + p, #wrapper main blockquote + p, #wrapper main h1 + #auth + p, #wrapper main h1 + #auth + #refme-auto-cite + blockquote, #wrapper main h1 + #auth + #refme-auto-cite + blockquote p, #wrapper main h1 + #auth + #refme-auto-cite + blockquote + p, #wrapper main h1 + #auth + #refme-auto-cite + p, #wrapper main h1 + p, #wrapper main h2 + p, #wrapper main h3 + p, #wrapper main p.image + p {
      text-indent: 0; }
    #wrapper main p:first-of-type {
      text-indent: 0; }
    #wrapper main ul {
      list-style: none;
      list-style-type: circle;
      font-size: 85%; }
    #wrapper main ol {
      font-size: 85%; }
    #wrapper main #footer-date {
      text-align: right; }
  #wrapper #articles-table {
    display: table;
    table-layout: fixed; }
    #wrapper #articles-table article {
      display: table-row; }
      #wrapper #articles-table article .article-image {
        width: 6em;
        height: 6em;
        margin-right: 0.8em;
        background-color: #b3b3b3; }
        #wrapper #articles-table article .article-image img {
          display: block;
          vertical-align: top;
          width: 6em;
          height: 6em;
          padding: 0;
          margin: 0; }
      #wrapper #articles-table article .article-description {
        display: table-cell;
        vertical-align: top;
        padding-bottom: 1.8em; }
        #wrapper #articles-table article .article-description h1 {
          margin: 0;
          font-size: 90%; }
        #wrapper #articles-table article .article-description p {
          font-size: 85%;
          line-height: initial;
          margin-top: .5em;
          margin-bottom: 0;
          text-indent: 0;
          color: #4c4c4c; }

div.ad {
  max-width: 42em; }

footer {
  text-align: right;
  margin-bottom: 5em;
  padding: 1em; }
  footer a {
    color: #4c4c4c; }
  footer a:hover {
    color: #AAA;
    text-decoration: none; }
  footer a:visited {
    color: #AAA; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background-color: #111; }
    body #wrapper {
      background-color: #000; }
    body .article-description p {
      color: #b3b3b3; }
    body h1, body h2, body h3 {
      color: #b3b3b3; }
    body footer a {
      color: #b3b3b3; }
    body footer p {
      background-color: #111111; }
    body #wrapper #articles-table article .article-image {
      background-color: #4c4c4c; }
    body #wrapper #articles-table article .article-description p {
      color: #fff; }
    body #wrapper main a {
      color: #b3b3b3; }
    body #wrapper main a:hover {
      color: #555555;
      text-decoration: none; }
    body #wrapper main a:visited {
      color: #555555; }
    body #wrapper table {
      border-top: 1px solid #b3b3b3;
      border-bottom: 1px solid #b3b3b3; }
      body #wrapper table th {
        border-bottom: 1px solid #b3b3b3; }
    body #wrapper blockquote {
      color: #b3b3b3; }
    body #wrapper p.code, body #wrapper pre.code {
      color: #839496;
      /* Base0: body text  */
      background-color: #002b36;
      /* Base03: background */
      /* the class names are not the actual color */
      /* Base3  */
      /* Base2  */
      /* Base00 */
      /* Base1: emphasized content */
      /* Base01: comments, secondary content */
      /* Base02: background highlights */ }
      body #wrapper p.code .Base03, body #wrapper pre.code .Base03 {
        color: #fdf6e3; }
      body #wrapper p.code .Base02, body #wrapper pre.code .Base02 {
        color: #eee8d5; }
      body #wrapper p.code .Base0, body #wrapper pre.code .Base0 {
        color: #657b83; }
      body #wrapper p.code .Base01, body #wrapper pre.code .Base01 {
        color: #93a1a1; }
      body #wrapper p.code .Base1, body #wrapper pre.code .Base1 {
        color: #586e75; }
      body #wrapper p.code .Base2, body #wrapper pre.code .Base2 {
        color: #073642; } }