@media screen and (max-width:1024px) {
    #TOC {display: none;}
    body {max-width: 65% !important;}
}
@media screen and (max-width:720px) {
    body {max-width: 80% !important;}
    div.category {right: .5em !important;}
}

html {
    font-size: 14px;
    line-height: 24px;
}

body {
    max-width: 50%;
    margin: 0 auto;
    padding: 20px;
    hyphens: auto;
    word-wrap: break-word;
    /* 对于 firefox，font-kerning 需要设为 auto，中文标点才会正常。*/
    /* font-kerning: normal; */
    font-family: "Arial", "Noto Sans CJK SC", sans-serif;
}

header {
    text-align: center;
}

h1, h2, h3, h4, h5 {
    margin: .5em auto;
    line-height: 1.5em;
}

h1.home-title { font-size: 2.65em; margin: .5em auto;}
h1.title { font-size: 2em; margin: .5em auto;}
h1 { font-size: 1.6em;}
h2 { font-size: 1.4em;}
h3 { font-size: 1.2em;}
p.subtitle {
    font-size:1.2em;
    text-align: center;
}

#TOC {
    padding: 0em .5em;
    border: 2pt solid darkgray;
    line-height: 1.5em;
    position: fixed;
    right: 1.75em;
    top: 6em;
    overflow: hidden;
}
div.category {
    font-size: 1em;
    width: 1em;
    text-color:white;
    text-align: center;
    position: fixed;
    right: 1.75em;
    bottom: 6em;
    line-height: 1.2em;
    padding: .5em .3em;
    background: #666666;
}

#TOC a {
    font-size: 0.9em;
    font-weight: normal;
}

hr {
    color: #eeeeee;
    size: 10;
}

div.category a {
    text-decoration: none;
}
div.category a:link {
    color: white;
    font-weight: bold;
}
div.category a:hover {
    color: white;
    text-decoration: none;
}
div.category a:visited {
    color: white;
    text-decoration: none;
}


p {
    margin: 1.3em 0;
    text-align: justify;
}

figure {
    margin: auto;
    text-align: center;
}

img {
    margin: 0 0;
    max-width: 100%;
}
figcaption {
    font-size: 0.9em;
    text-align: center;
    display: none;
}

pre {
    font-size: 0.9em;
    padding: 1em;
    line-height: 1.5em;
    overflow:auto !important;
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    max-height: 400px;
}

code, code span {
    color: #e83e8c;
    font-family: Monaco, 'Lucida Console', monospace;
}
pre code {
    overflow:auto !important;
    color: #000000;
    font-family: Monaco, 'Lucida Console', monospace;
}

a:link {
    color: #993333;
    font-weight: bold;
    text-decoration: underline; 
}
a:hover {
    color: #FF6666;
    text-decoration: none;
}
a:visited {
    color: #0066CC;
    text-decoration: none;
}

/* metadata */
p.author, p.date { text-align: center; margin: 0 auto;}

blockquote {
    margin: 0px !important;
    border-left: 4px solid #009A61;
}

blockquote p {
    font-size: 1em;
    margin: 0px !important;
    text-align: justify;
    padding:0.5em;
}

/* 列表 */
#TOC ul,  #TOC ol {
    padding:0em 1em;
}
li {padding-bottom:0.25em}

/* 文章里小节标题的序号与标题名称之间的间距, 针对我写的生成文章目录的 m4 宏 */
span.section-sep { margin-left: 0.5em; margin-right: 0.5em; }

div.footer {text-align:center;}

/* for orez */
/* 渲染文学编程的代码片段 */
pre {line-height: 1.6em; max-height: 40em;}
.orez-snippet-name, .orez-symbol {font-weight:bold; color: #cc3333;}
.orez-label {font-weight:bold; color:#008000;}
.orez-snippet-with-name .hll { background-color: #ffffcc }
.orez-snippet-with-name  { background: #f8f8f8; }
.orez-snippet-with-name .c { color: #408080;} /* Comment */
.orez-snippet-with-name .err { border: 1px solid #FF0000 } /* Error */
.orez-snippet-with-name .k { color: #008000;} /* Keyword */
.orez-snippet-with-name .o { color: #666666;} /* Operator */
.orez-snippet-with-name .ch { color: #408080;} /* Comment.Hashbang */
.orez-snippet-with-name .cm { color: #408080;} /* Comment.Multiline */
.orez-snippet-with-name .cp { color: #BC7A00;} /* Comment.Preproc */
.orez-snippet-with-name .cpf { color: #408080;} /* Comment.PreprocFile */
.orez-snippet-with-name .c1 { color: #408080;} /* Comment.Single */
.orez-snippet-with-name .cs { color: #408080;} /* Comment.Special */
.orez-snippet-with-name .gd { color: #A00000;} /* Generic.Deleted */
.orez-snippet-with-name .ge {} /* Generic.Emph */
.orez-snippet-with-name .gr { color: #FF0000;} /* Generic.Error */
.orez-snippet-with-name .gh { color: #000080;} /* Generic.Heading */
.orez-snippet-with-name .gi { color: #00A000;} /* Generic.Inserted */
.orez-snippet-with-name .go { color: #888888;} /* Generic.Output */
.orez-snippet-with-name .gp { color: #000080;} /* Generic.Prompt */
.orez-snippet-with-name .gs {} /* Generic.Strong */
.orez-snippet-with-name .gu { color: #800080;} /* Generic.Subheading */
.orez-snippet-with-name .gt { color: #0044DD;} /* Generic.Traceback */
.orez-snippet-with-name .kc { color: #008000;} /* Keyword.Constant */
.orez-snippet-with-name .kd { color: #008000;} /* Keyword.Declaration */
.orez-snippet-with-name .kn { color: #008000;} /* Keyword.Namespace */
.orez-snippet-with-name .kp { color: #008000;} /* Keyword.Pseudo */
.orez-snippet-with-name .kr { color: #008000;} /* Keyword.Reserved */
.orez-snippet-with-name .kt { color: #B00040;} /* Keyword.Type */
.orez-snippet-with-name .m { color: #666666;} /* Literal.Number */
.orez-snippet-with-name .s { color: #BA2121;} /* Literal.String */
.orez-snippet-with-name .na { color: #7D9029;} /* Name.Attribute */
.orez-snippet-with-name .nb { color: #008000;} /* Name.Builtin */
.orez-snippet-with-name .nc { color: #0000FF;} /* Name.Class */
.orez-snippet-with-name .no { color: #880000;} /* Name.Constant */
.orez-snippet-with-name .nd { color: #AA22FF;} /* Name.Decorator */
.orez-snippet-with-name .ni { color: #999999;} /* Name.Entity */
.orez-snippet-with-name .ne { color: #D2413A;} /* Name.Exception */
.orez-snippet-with-name .nf { color: #0000FF;} /* Name.Function */
.orez-snippet-with-name .nl { color: #A0A000;} /* Name.Label */
.orez-snippet-with-name .nn { color: #0000FF;} /* Name.Namespace */
.orez-snippet-with-name .nt { color: #008000;} /* Name.Tag */
.orez-snippet-with-name .nv { color: #19177C;} /* Name.Variable */
.orez-snippet-with-name .ow { color: #AA22FF;} /* Operator.Word */
.orez-snippet-with-name .w { color: #bbbbbb;} /* Text.Whitespace */
.orez-snippet-with-name .mb { color: #666666;} /* Literal.Number.Bin */
.orez-snippet-with-name .mf { color: #666666;} /* Literal.Number.Float */
.orez-snippet-with-name .mh { color: #666666;} /* Literal.Number.Hex */
.orez-snippet-with-name .mi { color: #666666;} /* Literal.Number.Integer */
.orez-snippet-with-name .mo { color: #666666;} /* Literal.Number.Oct */
.orez-snippet-with-name .sb { color: #BA2121;} /* Literal.String.Backtick */
.orez-snippet-with-name .sc { color: #BA2121;} /* Literal.String.Char */
.orez-snippet-with-name .sd { color: #BA2121;} /* Literal.String.Doc */
.orez-snippet-with-name .s2 { color: #BA2121;} /* Literal.String.Double */
.orez-snippet-with-name .se { color: #BB6622;} /* Literal.String.Escape */
.orez-snippet-with-name .sh { color: #BA2121;} /* Literal.String.Heredoc */
.orez-snippet-with-name .si { color: #BB6688;} /* Literal.String.Interpol */
.orez-snippet-with-name .sx { color: #008000;} /* Literal.String.Other */
.orez-snippet-with-name .sr { color: #BB6688;} /* Literal.String.Regex */
.orez-snippet-with-name .s1 { color: #BA2121;} /* Literal.String.Single */
.orez-snippet-with-name .ss { color: #19177C;} /* Literal.String.Symbol */
.orez-snippet-with-name .bp { color: #008000;} /* Name.Builtin.Pseudo */
.orez-snippet-with-name .vc { color: #19177C;} /* Name.Variable.Class */
.orez-snippet-with-name .vg { color: #19177C;} /* Name.Variable.Global */
.orez-snippet-with-name .vi { color: #19177C;} /* Name.Variable.Instance */
.orez-snippet-with-name .il { color: #666666;} /* Literal.Number.Integer.Long */