---
---

body.remarkdown {
  font-family: Inconsolata, Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace;
  font-size: 18px;
  background: var(--body-bg-color);
  color: var(--text-color);
  min-width: 380px;

  ::before, ::after {
    opacity: .6;
    color: var(--md-deco-color);
  }
  
  .container {
    max-width: 700px;
    padding: 10px;
    margin: auto;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    @media (min-width: 300px) {
      padding: 20px 20px;
    }
    @media (min-width: 700px) {
      padding: 40px 80px;
    }
  }

  main > p > img {
    width: 100%;
  }
  
  h1 {
    font-weight: bold;
    font-size: larger;
    text-transform: capitalize;
  }
  h2 {
    font-weight: bold;
    &::before {
      color: #aaa;
    }
  }
  p code {
    color: var(--code-color);
  }
  a {
    color: var(--link-color);
    text-decoration: none;
    code {
      color: inherit;
    }
    &:active, &:focus {
      color: var(--bg-color);
      background-color: var(--link-color);
    }
    &:hover {
      border-bottom: 1px solid;
    }
  }
  em {
    font-style: italic;
  }
  strong {
    font-weight: bold;
  }
  ul {
    margin-left: 2ch;
    > li::before {
      margin-left: -2ch;
    }
    &.tags {
      display: inline;
      margin: initial;
      li {
        display: inline;
        list-style: none;
        background-color: var(--tag-bg-color);
        padding: 0.2em 0.3em;
        &::before {
          content: '';
        }
        a {
          color: var(--tag-color);
          &::after, &::before {
            content: '';
          }
        }
      }
    }
    &.task-list li.task-list-item {
      &::before {
        content: '';
        float: none;
        margin-left: -3.5ch;
      }
      input.task-list-item-checkbox {
        margin-right: 1ch;
      }
    }
  }
  li em + a {
    display: inline-block;
    border-bottom: 1px solid transparent;
  }
  time {
    color: var(--time-color);
  }
  article time {
    display: block;
    text-align: right;
  }
  input[type="search"] {
    border: 1px solid var(--input-border-color);
    background-color: var(--input-bg-color);
    color: var(--input-color);
    font-family: inherit;
    font-size: smaller;
    padding: 0.2em;
    min-width: 150px;
    max-width: 350px;
    &:focus {
      border: 1px solid var(--link-color);
      width: calc(80vw - 200px);
    }
  }
  footer {
    font-size: smaller;
  }
  pre {
    overflow: auto;
    margin-left: 0ch;

    code {
      @media (max-width: 450px) {
        font-size: 0.9em;
      }
    }
  }
}

.highlight {
  pre {
    padding: 6px 10px;
  }
  .hll {
    padding: 6px 10px;
  }
}

:root {
  color-scheme: light dark; /* both supported */
}

@media(prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
  :root {
    --link-color: #a0f;
    --bg-color: #fdfdfd;
    --body-bg-color: #eee;
    --text-color: #333;
    --md-deco-color: #205080;
    --border-color: #ddd;
    --code-color: #999;
    --tag-color: #fdfdfd;
    --tag-bg-color: #c6f;
    --time-color: #aaa;
    --input-color: #333;
    --input-bg-color: #fdfdfd;
    --input-border-color: #777;
  }

  .highlight {
    pre {
      background-color: #f8f8f8;
    }
    .hll {
      background-color: #f8f8f8;
    }
    .c {
      color: #999988;
      font-style: italic;
    }
    .err {
      color: #a61717;
      background-color: #e3d2d2;
    }
    .k, .o {
      font-weight: bold;
    }
    .cm {
      color: #999988;
      font-style: italic;
    }
    .cp {
      color: #999999;
      font-weight: bold;
    }
    .c1 {
      color: #999988;
      font-style: italic;
    }
    .cs {
      color: #999999;
      font-weight: bold;
      font-style: italic;
    }
    .gd {
      color: #000000;
      background-color: #ffdddd;
      .x {
        color: #000000;
        background-color: #ffaaaa;
      }
    }
    .ge {
      font-style: italic;
    }
    .gr {
      color: #aa0000;
    }
    .gh {
      color: #999999;
    }
    .gi {
      color: #000000;
      background-color: #ddffdd;
      .x {
        color: #000000;
        background-color: #aaffaa;
      }
    }
    .go {
      color: #888888;
    }
    .gp {
      color: #555555;
    }
    .gs {
      font-weight: bold;
    }
    .gu {
      color: #800080;
      font-weight: bold;
    }
    .gt {
      color: #aa0000;
    }
    .kc, .kd, .kn, .kp, .kr {
      font-weight: bold;
    }
    .kt {
      color: #445588;
      font-weight: bold;
    }
    .m {
      color: #009999;
    }
    .s {
      color: #dd1144;
    }
    .n {
      color: #333333;
    }
    .na {
      color: teal;
    }
    .nb {
      color: #0086b3;
    }
    .nc {
      color: #445588;
      font-weight: bold;
    }
    .no {
      color: teal;
    }
    .ni {
      color: purple;
    }
    .ne, .nf {
      color: #990000;
      font-weight: bold;
    }
    .nn {
      color: #555555;
    }
    .nt {
      color: navy;
    }
    .nv {
      color: teal;
    }
    .ow {
      font-weight: bold;
    }
    .w {
      color: #bbbbbb;
    }
    .mf, .mh, .mi, .mo {
      color: #009999;
    }
    .sb, .sc, .sd, .s2, .se, .sh, .si, .sx {
      color: #dd1144;
    }
    .sr {
      color: #009926;
    }
    .s1 {
      color: #dd1144;
    }
    .ss {
      color: #990073;
    }
    .bp {
      color: #999999;
    }
    .vc, .vg, .vi {
      color: teal;
    }
    .il {
      color: #009999;
    }
    .gc {
      color: #999;
      background-color: #EAF2F5;
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: #d073ff;
    --bg-color: #292929;
    --body-bg-color: #1b1b1b;
    --text-color: #d6d6d6;
    --md-deco-color: #fbe36e;
    --border-color: #222222;
    --code-color: #828282;
    --tag-color: #fdfdfd;
    --tag-bg-color: #8f00d6;
    --time-color: #555555;
    --input-color: #cccccc;
    --input-bg-color: #0f0f0f;
    --input-border-color: #888888;
  }

  body img {
    filter: brightness(.8) contrast(1.2);
    &[src$=".svg"] {
      filter: invert(90%);
    }
  }

  .highlight {
    pre {
      color: #fbf1c7;
      background-color: #242424;
    }
    .w {
      color: #fbf1c7;
      background-color: #282828;
    }
    .err {
      color: #fb4934;
      background-color: #282828;
      font-weight: bold;
    }
    .c, .cd, .cm, .c1, .cs {
      color: #928374;
      font-style: italic;
    }
    .cp {
      color: #8ec07c;
    }
    .nt {
      color: #fb4934;
    }
    .o, .ow, .p, .pi {
      color: #fbf1c7;
    }
    .gi {
      color: #b8bb26;
      background-color: #282828;
    }
    .gd {
      color: #fb4934;
      background-color: #282828;
    }
    .gh {
      color: #b8bb26;
      font-weight: bold;
    }
    .k, .kn, .kp, .kr, .kv {
      color: #fb4934;
    }
    .kc {
      color: #d3869b;
    }
    .kt {
      color: #fabd2f;
    }
    .kd {
      color: #fe8019;
    }
    .s, .sb, .sc, .sd, .s2, .sh, .sx, .s1, .si, .sr {
      color: #b8bb26;
      font-style: italic;
    }
    .se {
      color: #fe8019;
    }
    .nn, .nc {
      color: #8ec07c;
    }
    .no {
      color: #d3869b;
    }
    .na {
      color: #b8bb26;
    }
    .m, .mf, .mh, .mi, .il, .mo, .mb, .mx {
      color: #d3869b;
    }
    .ss {
      color: #83a598;
    }
  }
}
