* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  font: 16px/1.5 "Fira Sans",
    "Source Han Sans", "Noto Sans",
    "Source Han Sans CN", "Source Han Sans JP",
    sans-serif;
}

body {
  background: #181613;
  color: #bbb;
  margin: auto;
  display: grid;
  grid-template:
    "n n" auto
    "m a" auto
    "f f" auto / 3fr 1fr;
  max-width: 960px;
}

@media (max-width: 640px) {
  body {
    grid-template:
      "n" auto
      "m" auto
      "a" auto
      "f" auto / 1fr;
  }
}

h1,
h2,
h3 {
  font-weight: normal;
}

hr {
  border: 0;
  border-top: 1px solid #666;
}

pre,
code {
  font-family: inherit;
}

pre {
  margin: 1em 2em;
}

a {
  text-decoration: none;
  color: #3692e7;
}

a:hover,
a:active,
a:focus {
  color: #57aeff;
}

img {
  max-width: 100%;
}

nav {
  grid-area: n;
  margin: 10px;
  display: flex;
  flex-flow: row wrap;
}

nav>a {
  color: #999;
  height: 32px;
  line-height: 32px;
  padding: 0 .7rem;
  text-transform: uppercase;
  border-left: 2px solid transparent;
}

nav>a:first-child {
  font-size: 28px;
  text-transform: none;
}

nav>a:not(:first-child):active {
  background: #3c3934;
  color: #ccc;
  border-color: #3692e7;
}

main,
aside {
  background: #1d1a17;
  border-radius: 10px;
  margin: 10px;
  padding: 20px;
}

main {
  grid-area: m;
}

aside {
  grid-area: a;
}

aside>a {
  display: block;
  color: #bf811d;
  font-weight: bold;
}

dl.meta {
  display: grid;
  grid-template-columns: 6em 1fr;
  font-size: .9em;
}

dl.meta>dt {
  font-weight: bold;
}

dl.meta>dt::after {
  content: ":";
}

dl.meta>dd {
  margin: 0;
}

.more {
  display: block;
  color: #999;
  text-align: right;
  font-size: .75em;
  font-weight: normal;
}

footer {
  grid-area: f;
  text-align: center;
  margin: 20px;
}

/* Prism */
code {
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2em;
  hyphens: none;
  /* 在所有代码上设置样式看上去十分离谱，但是想到代码高亮由JavaScript完成，倒也没那么离谱。 */
  font-style: italic;
}

.language-css,
.language-less,
.language-sass,
.language-scss,
.token {
  font-style: normal;
}

code:not([class*="language-"]),
.language-markup,
.language-html,
.language-xml,
.language-svg,
.language-mathml,
.language-ssml,
.language-atom,
.language-rss,
.language-tex,
/* Operators get monospace because monospace fonts usually come with centered asterisks… */
.token.operator,
.token.char,
.token.string,
.token.regex,
.token.url,
.token.indentation,
[mathvariant="monospace"] {
  font-family: "Fira Mono", monospace, monospace;
  font-style: normal;
}

.token.atrule>.token.rule,
.token.keyword,
.token.boolean,
.token.important,
.token.tag,
.token.bold {
  font-weight: bold;
}

.token.constant,
.token.variable,
.token.lambda-parameter,
.token.function,
.token.class-name,
.token.content,
.token.italic {
  font-style: italic;
}

.token.attr-name,
.token.attr-value {
  font-weight: normal;
}

.token.comment,
.token.prolog,
.token.doctype {
  color: #888;
}

.token.inserted {
  color: #690;
}

.token.deleted {
  color: #b05;
}

.token.entity {
  text-decoration: dotted underline;
  cursor: help;
}