body {
  margin: 2em auto;
  padding: 0 1em;
  font-family: sans-serif;
  line-height: 1.8;
  background: silver;
  color: #000;
}

h1 {
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  margin: 1.5em 0 1em;
}

h2 {
  font-size: 1.35em;
  margin-top: 2.5em;
}

h3 {
  font-size: 1.1em;
  margin-top: 2em;
}

math[display="inline"] {
  margin-inline: 0.25em;
}

hr {
  border: none;
  border-top: 1px solid #999;
  margin: 2em 0;
}

ul.toc {
  list-style: none;
  padding-left: 1em;
}

ul.toc li {
  margin: 0.8em 0;
}

code {
  font-family: monospace, monospace; /* 二重に書くのは、等幅指定のときだけ既定の文字サイズが縮む挙動を避けるため */
  font-size: 0.95em;
  overflow-wrap: anywhere; /* 長いパスが狭い画面の幅を突き抜けないようにするため */
  background: #e8e8e8;
  padding: 0.1em 0.3em; /* 上下は控えめにする。大きくすると行間に食い込んで前後の行と重なるため */
  border-radius: 3px;
}

/* ディレクトリツリーなどの整形済みテキストを置く場所。
   はみ出した行は折り返さず、この枠の中だけ横にスクロールさせる。 */
pre {
  background: #e8e8e8;
  padding: 0.8em 1em;
  border-radius: 3px;
  overflow-x: auto;
  line-height: 1.4; /* 罫線が縦につながって見えるように、本文より詰める */
}

/* コードブロックの中では、1行ごとに背景の帯が付いてしまうので打ち消す */
pre code {
  background: none;
  padding: 0;
  font-size: 1em; /* pre と code で二重に縮まないようにする */
  overflow-wrap: normal; /* ツリーの罫線が途中で折り返されないようにする */
}

/* ここから下はシンタックスハイライトの色。
   フェンスに言語名を書いた場合だけ、pandocが <span class="kw"> のような
   class に分けてくれる。その class に色を割り当てるのがこの部分。
   pandoc内蔵のtangoテーマから、色の指定だけを抜き出して貼っている。
   （レイアウトの指定は上の pre / pre code に任せるので取り込まない。）
   テーマを変えるときは、次を実行して出力の code span の行を貼り替える：
     printf '$highlighting-css$\n' > /tmp/hlcss.html
     printf '```xml\n<a b="c"/>\n```\n' \
       | pandoc --template=/tmp/hlcss.html --syntax-highlighting=<テーマ名> -t html
   そのテーマが色を定義していないトークンは中身の無いルールとして出てくるので、
   （tangoでは .ex と .im がそうだった）貼るときに捨てる。 */
code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #204a87; } /* Attribute */
code span.bn { color: #0000cf; } /* BaseN */
code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4e9a06; } /* Char */
code span.cn { color: #8f5902; } /* Constant */
code span.co { color: #8f5902; font-style: italic; } /* Comment */
code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
code span.dt { color: #204a87; } /* DataType */
code span.dv { color: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #204a87; font-weight: bold; } /* Function */
code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
code span.ot { color: #8f5902; } /* Other */
code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
code span.sc { color: #ce5c00; font-weight: bold; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* String */
code span.va { color: #000000; } /* Variable */
code span.vs { color: #4e9a06; } /* VerbatimString */
code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */

img {
  max-width: 100%;
  height: auto; /* SVGが width="1920px" を持つため、これがないと画面幅を突き抜ける */
}

figure {
  margin: 2em 0;
  text-align: center;
}

figcaption {
  font-size: 0.9em;
  margin-top: 0.5em;
}

a {
  color: #00e;
}

a:visited {
  color: #551a8b;
}

address {
  font-style: normal;
  text-align: right;
  font-size: 0.9em;
}