:root {
  --color-background: #fff;
  --color-font: #000;
  --color-basic: #000;
  --color-meta: #ccc;
  --color-link: #999;
  --color-code: #222;
  --color-code-marked: #d6d6d6;
  --color-code-gray: #93a1a1;
  --color-code-green: #71b279;
  --color-code-cyan: #2aa198;
  --color-code-blue: #268bdf;
  --color-code-purple: #b589ff;
  --color-code-orange: #f08d49;
  --color-code-red: #dc322f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #000;
    --color-font: #ddd;
    --color-basic: #ddd;
    --color-meta: #333;
    --color-link: #999;
    --color-code: #ddd;
    --color-code-marked: #d6d6d6;
    --color-code-gray: #93a1a1;
    --color-code-green: #3eaf7c;
    --color-code-cyan: #2aa198;
    --color-code-blue: #268bd2;
    --color-code-purple: #b589ff;
    --color-code-orange: #f08d49;
    --color-code-red: #dc322f;
  }
}
@font-face {
  font-family: "Fontello";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local("Fontello"), url("/assets/fonts/Fontello/Icons.ttf") format("truetype");
}
@font-face {
  font-family: "Meslo LG";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local("Meslo LG S Regular"), url("/assets/fonts/Meslo-LG/MesloLGS-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Meslo LG";
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: local("Meslo LG S Italic"), url("/assets/fonts/Meslo-LG/MesloLGS-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Meslo LG";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local("Meslo LG S Bold"), url("/assets/fonts/Meslo-LG/MesloLGS-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Meslo LG";
  font-style: italic;
  font-weight: bold;
  font-display: swap;
  src: local("Meslo LG S Bold Italic"), url("/assets/fonts/Meslo-LG/MesloLGS-BoldItalic.ttf") format("truetype");
}
* {
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar {
  width: 5px;
  height: 1px;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-basic);
  border-radius: 0px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
img {
  pointer-events: none;
}
body {
  background: var(--color-background);
  color: var(--color-font);
  font-family: Menlo, "Meslo LG", monospace;
  font-size: 14px;
}
@media screen and (max-width: 1260px) {
  body {
    margin: 0 30px;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 13px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Menlo, "Meslo LG", monospace;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
}
a {
  text-decoration: none;
  color: var(--color-font);
}
a:hover {
  text-decoration: underline;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.clearfix {
  pointer-events: none;
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.inner {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1260px) {
  .inner {
    width: 100%;
  }
}
#main-col {
  width: 900px;
}
@media screen and (max-width: 1260px) {
  #main-col {
    width: 100%;
    margin-right: -300px;
  }
}
@media screen and (max-width: 900px) {
  #main-col {
    margin-right: 0;
    float: none;
  }
}
@media screen and (max-width: 1260px) {
  #wrapper {
    margin-right: 300px;
  }
}
@media screen and (max-width: 900px) {
  #wrapper {
    margin-right: 0;
  }
}
#header {
  margin: 50px auto;
}
#header h1 {
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1;
}
#header h2 {
  font-weight: normal;
  font-size: 0.9em;
  line-height: 1;
  margin-top: 10px;
}
article .post-content {
  margin-bottom: 30px;
  position: relative;
}
article header time {
  font: 0.9em Menlo, "Meslo LG", monospace;
  margin-bottom: 5px;
  display: block;
  line-height: 1;
}
article header time a {
  color: var(--color-font);
}
article header .title {
  font-weight: normal;
}
article header .title a {
  color: var(--color-font);
}
article header .title a:hover {
  text-decoration: underline;
}
article .entry {
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 1.6;
}
article .entry p,
article .entry blockquote,
article .entry ul,
article .entry ol,
article .entry dl,
article .entry table,
article .entry iframe,
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6,
article .entry .video-container {
  margin-top: 15px;
}
article .entry p code,
article .entry blockquote code,
article .entry ul code,
article .entry ol code,
article .entry dl code,
article .entry table code,
article .entry iframe code,
article .entry h3 code,
article .entry h4 code,
article .entry h5 code,
article .entry h6 code,
article .entry .video-container code {
  display: inline;
  line-break: anywhere;
}
article .entry mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
}
article .entry a {
  color: var(--color-font);
  text-decoration: underline;
}
article .entry a:hover {
  font-weight: bold;
}
article .entry table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid var(--color-basic);
  width: 100%;
}
article .entry table th {
  white-space: nowrap;
  color: var(--color-font);
  font-weight: 600;
  background: var(--color-background);
}
article .entry table td,
article .entry table th {
  border: 1px solid var(--color-basic);
  padding: 8px 16px;
  text-align: left;
}
article .entry figure.highlight table {
  border: none;
  width: auto;
  border-collapse: separate;
}
article .entry blockquote {
  border-top: 1px solid var(--color-basic);
  border-bottom: 1px solid var(--color-basic);
  font-style: italic;
  font-family: Menlo, "Meslo LG", monospace;
  font-size: 1.2em;
  padding: 0 30px 15px;
  text-align: center;
}
article .entry blockquote footer {
  border-top: none;
  font-size: 0.8em;
  line-height: 1;
  margin: 20px 0 0;
  padding-top: 0;
}
article .entry blockquote footer cite:before {
  content: '—';
  color: var(--color-meta);
  padding: 0 0.5em;
}
article .entry details {
  padding-top: 10px;
}
article .entry details summary {
  cursor: pointer;
}
article .entry code,
article .entry pre {
  font-family: Menlo, "Meslo LG", monospace;
}
article .entry code {
  background: var(--color-background);
  color: var(--color-code);
  padding: 0 5px;
  margin: 0 2px;
  font-size: 0.9em;
  border: 1px solid var(--color-basic);
  border-radius: 3px;
}
article .entry pre {
  background: var(--color-background);
  border: 1px solid var(--color-basic);
  margin-top: 15px;
  overflow: auto;
  padding: 7px 15px;
  border-radius: 2px;
}
article .entry pre code {
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
}
article .entry ul {
  margin-left: 20px;
}
article .entry ul ul,
article .entry ul ol,
article .entry ul dl {
  margin-top: 5px;
}
article .entry ol,
article .entry dl {
  margin-left: 30px;
}
article .entry ol ul,
article .entry dl ul,
article .entry ol ol,
article .entry dl ol,
article .entry ol dl,
article .entry dl dl {
  margin-top: 5px;
}
article .entry h1,
article .entry h2 {
  font-weight: normal;
  border-bottom: 1px solid var(--color-basic);
  padding-bottom: 10px;
  margin-top: 20px;
}
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6 {
  font-weight: normal;
}
article .entry .mermaid-container {
  border: none;
  text-align: center;
}
article .entry .mermaid-container svg {
  height: 100%;
}
article .entry img,
article .entry video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: none;
}
article .entry iframe {
  border: none;
}
article .entry .caption {
  display: block;
  margin-top: 5px;
  color: var(--color-meta);
  position: relative;
  font-size: 0.9em;
  padding-left: 25px;
  vertical-align: middle;
}
article .entry .caption:before {
  content: '\270e';
  position: absolute;
  font: 1.3em Fontello;
  position: absolute;
  left: 0;
  top: 3px;
}
article .entry .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
article .entry .video-container iframe,
article .entry .video-container object,
article .entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
article .entry .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  font-size: 1.5em;
}
article footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--color-basic);
  color: var(--color-meta);
  font-size: 0.9em;
  line-height: 16px;
  position: relative;
  min-height: 16px;
}
article footer a {
  font-weight: bold;
  color: var(--color-font);
}
article footer a:hover {
  text-decoration: underline;
}
article footer a.more-link {
  display: block;
  vertical-align: middle;
}
article footer a.more-link:before {
  font-family: Fontello;
  padding-right: 8px;
  font-size: 0.9em;
  content: '\276f';
}
article footer .tags {
  color: var(--color-font);
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
}
article footer .tags:before {
  position: absolute;
  font: 1.1em Fontello;
}
article footer .tags {
  vertical-align: middle;
}
article footer .tags:before {
  content: '\f001';
  top: 1px;
  left: 2px;
}
article footer .addthis {
  margin-top: 15px;
}
article footer .addthis iframe {
  margin-top: 0;
}
#pagination a {
  color: var(--color-font);
  font-weight: bold;
  font-family: Menlo, "Meslo LG", monospace;
  margin-bottom: 30px;
}
#pagination a:hover {
  text-decoration: underline;
}
#pagination .prev {
  vertical-align: middle;
}
#pagination .prev:before {
  font: 0.9em Fontello;
  content: '\276e';
  padding-right: 10px;
}
#pagination .next {
  vertical-align: middle;
}
#pagination .next:after {
  font: 0.9em Fontello;
  content: '\276f';
  padding-left: 10px;
}
.archive-title {
  color: var(--color-font);
  font-weight: normal;
  margin-bottom: 30px;
}
.archive-title:before {
  font-family: Fontello;
  padding-right: 15px;
}
.archive-title.tag {
  vertical-align: middle;
}
.archive-title.tag:before {
  content: '\f001';
}
.archive {
  margin-bottom: 50px;
}
.archive article .post-content {
  margin-bottom: 5;
}
#sidebar {
  width: 270px;
  line-height: 1.8em;
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}
@media screen and (max-width: 900px) {
  #sidebar {
    position: unset;
    float: none;
    width: 100%;
  }
}
#sidebar .widget::-webkit-scrollbar {
  display: none;
}
#sidebar .widget {
  border: 1px solid var(--color-basic);
  margin-bottom: 30px;
  word-wrap: break-word;
  max-height: var(--sidebar-wrapper-height);
  overflow-y: auto;
  -ms-overflow-style: none;
}
#sidebar .widget .title {
  padding: 15px 20px;
  font-size: 1em;
  border-bottom: 1px solid var(--color-basic);
  font-weight: bold;
  pointer-events: none;
}
#sidebar .widget .entry {
  font-size: 0.9em;
  padding: 15px 20px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
#sidebar .widget ul,
#sidebar .widget ol,
#sidebar .widget dl {
  list-style: none;
}
#sidebar .widget ul ul,
#sidebar .widget ol ul,
#sidebar .widget dl ul,
#sidebar .widget ul ol,
#sidebar .widget ol ol,
#sidebar .widget dl ol,
#sidebar .widget ul dl,
#sidebar .widget ol dl,
#sidebar .widget dl dl {
  list-style: disc;
  margin-left: 20px;
}
#sidebar .tag {
  vertical-align: middle;
}
#sidebar .tag small {
  pointer-events: none;
}
#sidebar .tag small:before {
  content: '[';
}
#sidebar .tag small:after {
  content: ']';
}
#footer {
  color: var(--color-basic);
  margin-bottom: 30px;
  font: 0.9em/1.6 Menlo, "Meslo LG", monospace;
  pointer-events: none;
}
#footer .copy-right {
  vertical-align: middle;
}
#footer .copy-right:before {
  font-family: Fontello;
  content: '\00a9  \2117';
  padding-right: 8px;
}
.entry .gist {
  background: var(--color-background);
  border: 1px solid var(--color-basic);
  margin-top: 15px;
  padding: 7px 15px;
  border-radius: 2px;
  line-height: 1.6;
  overflow: auto;
  color: var(--color-code);
}
.entry .gist .gist-file {
  border: none;
  font-family: inherit;
  margin: 0;
  font-size: 0.9em;
}
.entry .gist .gist-file .gist-data {
  background: none;
  border-bottom: none;
}
.entry .gist .gist-file .gist-data pre {
  padding: 0 !important;
  font-family: Menlo, "Meslo LG", monospace;
}
.entry .gist .gist-file .gist-meta {
  background: none;
  color: var(--color-meta);
  margin-top: 5px;
  padding: 0;
  font-size: 100%;
}
.entry .gist .gist-file .gist-meta a {
  color: var(--color-link);
}
.entry .gist .gist-file .gist-meta a:visited {
  color: var(--color-link);
}
figure.highlight {
  background: var(--color-background);
  border: 1px solid var(--color-basic);
  margin-top: 15px;
  padding: 7px 15px;
  border-radius: 2px;
  line-height: 1.6;
  overflow: auto;
  position: relative;
  font-size: 0.9em;
}
figure.highlight figcaption {
  color: var(--color-meta);
  margin-bottom: 5px;
}
figure.highlight figcaption a {
  position: absolute;
  right: 15px;
}
figure.highlight pre {
  border: none;
  padding: 0;
  margin: 0;
}
figure.highlight table {
  margin-top: 0;
  border-spacing: 0;
}
figure.highlight .gutter {
  color: var(--color-meta);
  padding: 0;
  padding-right: 15px;
  border: 0;
  border-right: 1px solid var(--color-basic);
  text-align: right;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
figure.highlight .code {
  padding-left: 15px;
  border: 0;
  border-left: 1px solid var(--color-background);
  color: var(--color-code);
}
figure.highlight .line {
  height: 20px;
  color: var(--color-code);
}
figure.highlight .line.marked {
  background: var(--color-code-marked);
}
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc,
pre .comment {
  color: var(--color-code-gray);
  font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: var(--color-code-green);
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: var(--color-code-cyan);
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
  color: var(--color-code-blue);
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: var(--color-code-purple);
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: var(--color-code-orange);
}
pre .deletion {
  color: var(--color-code-red);
}