:root {
  color-scheme: light dark;
  --bg-color: light-dark(#eee, #222);
}

@media (prefers-color-scheme: light) {
  pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}
@media (prefers-color-scheme: dark) {
  pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
}

html,
body {
  height: 100vh;
  margin: 0;

  background-color: var(--bg-color);
}
@media screen and (max-width: 512px) {
  main {
    display: grid;
  }
  article {
    max-width: 512px;
  }
}

/* layouts/articles */
#articles {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
      margin: 0 15%;
      text-align: center;
    }
  }
  article {
    h2 {
      &::before {
        content: '* ';
        font-size: 0.5rem;
      }
      color: red;
    }
    h3 {
      &::before {
        content: '** ';
        font-size: 0.5rem;
      }
      color: green;
    }
    h4,
    h5,
    h6 {
      display: none;
    }

    p code {
      background-color: #555;
      font-size: 12px;
      padding: 0 0.4rem;
    }

    blockquote {
      margin-left: 1.5rem;
      border-left: 0.2rem solid #fff;
      padding-left: 0.5rem;
    }
  }
}