:root {
  --width: 600px;
  --component-padding: 20px;
  --bg: white;
  --secondary-bg: #eee;
  --primary: #007bff;
  --text-color: #444;
  --code-literal: #484; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121415;
    --secondary-bg: #2d2d2d;
    --primary: #78bef8;
    --text-color: #444;
    --code-literal: #f79; } }

body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: auto;
  max-width: var(--width);
  padding: var(--component-padding);
  background-color: var(--bg); }
  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--bg);
      color: #e1dfdc; } }
dt {
  font-weight: bold;
  padding: 10px 0px 10px 0px; }

article header {
  margin-top: var(--component-padding);
  margin-bottom: var(--component-padding);
  border-bottom: 1px solid var(--text-color); }

article header > h1 {
  margin-bottom: 0.1rem; }

article header > p {
  margin: 0.1rem; }

blockquote {
  border: 1px solid var(--text-color);
  border-left: 6px solid var(--text-color);
  margin: 2rem 0;
  padding: calc(var(--component-padding) / 2); }
  @media (prefers-color-scheme: dark) {
    blockquote {
      border: 1px solid var(--text-color);
      border-left: 6px solid var(--text-color); } }
blockquote p {
  margin: 0; }

a {
  color: var(--primary); }
  a:visited {
    filter: brightness(85%); }
  a:hover {
    text-decoration: none; }
  @media (prefers-color-scheme: dark) {
    a {
      color: var(--primary); }
      a:visited {
        color: var(--primary); } }
.page-header {
  margin-bottom: calc(var(--component-padding) * 2); }
  .page-header h1 {
    margin-bottom: 0.1rem;
    font-size: inherit; }

.page-list {
  list-style-type: none;
  padding: unset; }
  .page-list li {
    display: flex;
    margin-bottom: calc(var(--component-padding) / 2); }
    .page-list li span {
      flex: 0 0 140px; }

code {
  font-size: 1rem;
  background: var(--secondary-bg);
  padding: 0 0.3rem; }
  @media (prefers-color-scheme: dark) {
    code {
      background: var(--secondary-bg); } }
pre code {
  font-size: inherit;
  padding: 0;
  background: none; }

pre {
  padding: 10px;
  overflow-x: auto;
  background-color: var(--secondary-bg); }
  @media (prefers-color-scheme: dark) {
    pre {
      border: solid 1px var(--text-color); } }
  pre .c,
  pre .c1,
  pre .cm {
    color: #707070;
    font-style: italic; }
    @media (prefers-color-scheme: dark) {
      pre .c,
      pre .c1,
      pre .cm {
        color: #999999; } }
  pre .k,
  pre .kd,
  pre .kn,
  pre .kr,
  pre .nt,
  pre .nb {
    color: #008; }
    @media (prefers-color-scheme: dark) {
      pre .k,
      pre .kd,
      pre .kn,
      pre .kr,
      pre .nt,
      pre .nb {
        color: #69f; } }
  pre .cp {
    color: #222;
    font-weight: bold; }
    @media (prefers-color-scheme: dark) {
      pre .cp {
        color: #db8; } }
  pre .kt {
    color: #44f; }
    @media (prefers-color-scheme: dark) {
      pre .kt {
        color: #3cf; } }
  pre .s,
  pre .s2,
  pre .sd,
  pre .s1 {
    color: var(--code-literal);
    font-style: italic; }
    @media (prefers-color-scheme: dark) {
      pre .s,
      pre .s2,
      pre .sd,
      pre .s1 {
        color: var(--code-literal); } }
  pre .no {
    color: var(--code-literal); }
    @media (prefers-color-scheme: dark) {
      pre .no {
        color: var(--code-literal); } }
  pre .mi, pre .kc {
    color: var(--code-literal); }
    @media (prefers-color-scheme: dark) {
      pre .mi, pre .kc {
        color: var(--code-literal); } }
main img {
  display: block;
  margin: 0.5rem auto;
  max-width: 80%; }

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  margin: 10px 0px 10px 0px; }
  table th {
    background: var(--secondary-bg);
    font-weight: bold; }
  table tbody tr:nth-child(even) {
    background: var(--secondary-bg); }
  table td,
  table th {
    border-bottom: 1px solid black;
    padding: 0px 5px 0px 5px; }

ol li {
  line-height: 1.3; }
  ol li:not(:last-child) {
    margin-bottom: 0.35rem; }

footer nav ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0; }

footer nav ul li {
  display: inline-block; }

figure {
  margin: 0 auto;
  width: 60%; }
  figure img {
    display: block;
    margin: 0.5rem auto;
    max-width: 80%; }
  figure figcaption {
    margin: auto;
    width: 90%;
    text-align: center;
    font-size: 0.8rem; }
    @media (prefers-color-scheme: dark) {
      figure figcaption {
        color: #555; } }
    @media (max-width: 768px) {
      figure figcaption {
        width: 75%; } }
  @media (max-width: 768px) {
    figure {
      width: 90%; } }