html,
body,
div {
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Palatino Linotype", "Book Antiqua", "STFangSong", Helvetica, Arial, Vernada, Tahoma, STXihei, "Microsoft YaHei", "Songti SC", SimSun, Heiti, sans-serif;
  font-size: 18px;
  padding: 2% 5% 5% 5%;
  line-height: 150%;
  border: 1px solid LightGrey;
  margin: 5% auto;
  width: 50%;
  box-sizing: border-box;
}
H1 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
}
H2 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
  margin-bottom: 60px;
  margin-bottom: 40px;
  padding: 5px;
  border-bottom: 2px LightGrey solid;
  width: 90%;
  line-height: 150%;
  color: #666;
}
H3 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
  margin-top: 40px;
  margin-bottom: 30px;
  border-bottom: 1px LightGrey solid;
  width: 80%;
  line-height: 150%;
  color: #666;
}
H4 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
  margin-top: 40px;
  margin-bottom: 30px;
  border-bottom: 1px LightGrey solid;
  width: 80%;
  line-height: 150%;
  color: #666;
}
li {
  margin-left: 10px;
}
blockquote {
  color: #737373;
  border-left: 4px #d3d3d3 solid;
  padding-left: 5px;
  margin-left: 20px;
}
a {
  text-decoration: none;
  cursor: crosshair;
  border-bottom: 1px dashed Red;
  color: #000;
  word-break: break-all;
}
a:hover {
  background-color: LightGrey;
}
img {
  display: block;
  box-shadow: 0 0 10px #555;
  border-radius: 6px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 0 10px #555;
  max-width: 100%;
}
hr {
  color: LightGrey;
}
p {
  text-indent: 2em;
}
ul,
ol {
  padding-inline-start: 2.8em;
}
table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  font-size: 14px;
  border: 1px solid #8e908c;
  padding: 3px 7px 2px 7px;
}
table th {
  font-size: 1.1em;
  text-align: left;
  padding-top: 5px;
  padding-bottom: 4px;
  background-color: #8e908c;
  color: #fff;
}
table tr.alt td {
  color: #000;
  background-color: #8e908c;
}
table tr:nth-child(odd) {
  background: #f4f4f4;
}
.toc a {
  color: #658dc0;
  border-bottom: none;
}
.toc a:hover {
  color: #000;
  border-bottom: none;
}
.toc-item {
  color: #4271ae;
  border-bottom: none;
}
.toc-item a:hover {
  border-bottom: none;
}
.article-category {
  text-align: center;
}
pre,
.highlight {
  background: #f7f7f7;
  margin: 20px 0;
  padding: 15px;
  overflow: auto;
  font-size: $code-font-size;
  color: #4d4d4c;
  line-height: $line-height-code-block;
}
.highlight .gutter pre {
  color: #666;
}
pre,
code {
  font-family: "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace;
}
code {
  word-break: break-all;
  background: $gainsboro;
  text-shadow: 0 1px #fff;
  padding: 0 0.3em;
}
pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.highlight pre {
  border: none;
  margin: 0;
  padding: 1px;
}
.highlight table {
  margin: 0;
  width: auto;
  border: none;
}
.highlight td {
  border: none;
  padding: 0;
}
.highlight figcaption {
  font-size: 0.85em;
  color: #8e908c;
  line-height: 1em;
  margin-bottom: 1em;
}
.highlight figcaption a {
  float: right;
}
.highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.highlight .line {
  height: 20px;
}
pre .comment {
  color: #8e908c;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #c82829;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command {
  color: #f5871f;
}
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #718c00;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata,
pre .special,
pre .number,
pre .formula {
  color: #718c00;
}
pre .title,
pre .css .hexcolor {
  color: #3e999f;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #4271ae;
}
pre .keyword,
pre .javascript .function {
  color: #8959a8;
}