* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**
 * markdown css 
 * https://github.com/sindresorhus/github-markdown-css 
 **/

.post {
  color-scheme: dark;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  color: #c9d1d9;
  background-color: #0d1117;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.post .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}

.post h1:hover .anchor .octicon-link:before,
.post h2:hover .anchor .octicon-link:before,
.post h3:hover .anchor .octicon-link:before,
.post h4:hover .anchor .octicon-link:before,
.post h5:hover .anchor .octicon-link:before,
.post h6:hover .anchor .octicon-link:before {
  width: 16px;
  height: 16px;
  content: " ";
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
}

.post details,
.post figcaption,
.post figure {
  display: block;
}

.post summary {
  display: list-item;
}

.post [hidden] {
  display: none !important;
}

.post a {
  background-color: transparent;
  color: #58a6ff;
  text-decoration: none;
}

.post a:active,
.post a:hover {
  outline-width: 0;
}

.post abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

.post b,
.post strong {
  font-weight: 600;
}

.post dfn {
  font-style: italic;
}

.post h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid #21262d;
}

.post mark {
  background-color: rgba(187, 128, 9, 0.15);
  color: #c9d1d9;
}

.post small {
  font-size: 90%;
}

.post sub,
.post sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.post sub {
  bottom: -0.25em;
}

.post sup {
  top: -0.5em;
}

.post img {
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: #0d1117;
}

.post code,
.post kbd,
.post pre,
.post samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

.post figure {
  margin: 1em 40px;
}

.post hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid #21262d;
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #30363d;
  border: 0;
}

.post input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.post [type="button"],
.post [type="reset"],
.post [type="submit"] {
  -webkit-appearance: button;
}

.post [type="button"]::-moz-focus-inner,
.post [type="reset"]::-moz-focus-inner,
.post [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.post [type="button"]:-moz-focusring,
.post [type="reset"]:-moz-focusring,
.post [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.post [type="checkbox"],
.post [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

.post [type="number"]::-webkit-inner-spin-button,
.post [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

.post [type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

.post [type="search"]::-webkit-search-cancel-button,
.post [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.post ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

.post ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

.post a:hover {
  text-decoration: underline;
}

.post hr::before {
  display: table;
  content: "";
}

.post hr::after {
  display: table;
  clear: both;
  content: "";
}

.post table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}

.post td,
.post th {
  padding: 0;
}

.post details summary {
  cursor: pointer;
}

.post details:not([open]) > *:not(summary) {
  display: none !important;
}

.post kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  line-height: 10px;
  color: #c9d1d9;
  vertical-align: middle;
  background-color: #161b22;
  border: solid 1px rgba(110, 118, 129, 0.4);
  border-bottom-color: rgba(110, 118, 129, 0.4);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4);
}

.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.post h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid #21262d;
}

.post h3 {
  font-weight: 600;
  font-size: 1.25em;
}

.post h4 {
  font-weight: 600;
  font-size: 1em;
}

.post h5 {
  font-weight: 600;
  font-size: 0.875em;
}

.post h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: #8b949e;
}

.post p {
  margin-top: 0;
  margin-bottom: 10px;
}

.post blockquote {
  margin: 0;
  padding: 0 1em;
  color: #8b949e;
  border-left: 0.25em solid #30363d;
}

.post ul,
.post ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}

.post ol ol,
.post ul ol {
  list-style-type: lower-roman;
}

.post ul ul ol,
.post ul ol ol,
.post ol ul ol,
.post ol ol ol {
  list-style-type: lower-alpha;
}

.post dd {
  margin-left: 0;
}

.post tt,
.post code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-size: 12px;
}

.post pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}

.post .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.post ::placeholder {
  color: #484f58;
  opacity: 1;
}

.post input::-webkit-outer-spin-button,
.post input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.post .pl-c {
  color: #8b949e;
}

.post .pl-c1,
.post .pl-s .pl-v {
  color: #79c0ff;
}

.post .pl-e,
.post .pl-en {
  color: #d2a8ff;
}

.post .pl-smi,
.post .pl-s .pl-s1 {
  color: #c9d1d9;
}

.post .pl-ent {
  color: #7ee787;
}

.post .pl-k {
  color: #ff7b72;
}

.post .pl-s,
.post .pl-pds,
.post .pl-s .pl-pse .pl-s1,
.post .pl-sr,
.post .pl-sr .pl-cce,
.post .pl-sr .pl-sre,
.post .pl-sr .pl-sra {
  color: #a5d6ff;
}

.post .pl-v,
.post .pl-smw {
  color: #ffa657;
}

.post .pl-bu {
  color: #f85149;
}

.post .pl-ii {
  color: #f0f6fc;
  background-color: #8e1519;
}

.post .pl-c2 {
  color: #f0f6fc;
  background-color: #b62324;
}

.post .pl-sr .pl-cce {
  font-weight: bold;
  color: #7ee787;
}

.post .pl-ml {
  color: #f2cc60;
}

.post .pl-mh,
.post .pl-mh .pl-en,
.post .pl-ms {
  font-weight: bold;
  color: #1f6feb;
}

.post .pl-mi {
  font-style: italic;
  color: #c9d1d9;
}

.post .pl-mb {
  font-weight: bold;
  color: #c9d1d9;
}

.post .pl-md {
  color: #ffdcd7;
  background-color: #67060c;
}

.post .pl-mi1 {
  color: #aff5b4;
  background-color: #033a16;
}

.post .pl-mc {
  color: #ffdfb6;
  background-color: #5a1e02;
}

.post .pl-mi2 {
  color: #c9d1d9;
  background-color: #1158c7;
}

.post .pl-mdr {
  font-weight: bold;
  color: #d2a8ff;
}

.post .pl-ba {
  color: #8b949e;
}

.post .pl-sg {
  color: #484f58;
}

.post .pl-corl {
  text-decoration: underline;
  color: #a5d6ff;
}

.post [data-catalyst] {
  display: block;
}

.post g-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1em;
  font-style: normal !important;
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.075em;
}

.post g-emoji img {
  width: 1em;
  height: 1em;
}

.post::before {
  display: table;
  content: "";
}

.post::after {
  display: table;
  clear: both;
  content: "";
}

.post > *:first-child {
  margin-top: 0 !important;
}

.post > *:last-child {
  margin-bottom: 0 !important;
}

.post a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.post .absent {
  color: #f85149;
}

.post .anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}

.post .anchor:focus {
  outline: none;
}

.post p,
.post blockquote,
.post ul,
.post ol,
.post dl,
.post table,
.post pre,
.post details {
  margin-top: 0;
  margin-bottom: 16px;
}

.post blockquote > :first-child {
  margin-top: 0;
}

.post blockquote > :last-child {
  margin-bottom: 0;
}

.post sup > a::before {
  content: "[";
}

.post sup > a::after {
  content: "]";
}

.post h1 .octicon-link,
.post h2 .octicon-link,
.post h3 .octicon-link,
.post h4 .octicon-link,
.post h5 .octicon-link,
.post h6 .octicon-link {
  color: #c9d1d9;
  vertical-align: middle;
  visibility: hidden;
}

.post h1:hover .anchor,
.post h2:hover .anchor,
.post h3:hover .anchor,
.post h4:hover .anchor,
.post h5:hover .anchor,
.post h6:hover .anchor {
  text-decoration: none;
}

.post h1:hover .anchor .octicon-link,
.post h2:hover .anchor .octicon-link,
.post h3:hover .anchor .octicon-link,
.post h4:hover .anchor .octicon-link,
.post h5:hover .anchor .octicon-link,
.post h6:hover .anchor .octicon-link {
  visibility: visible;
}

.post h1 tt,
.post h1 code,
.post h2 tt,
.post h2 code,
.post h3 tt,
.post h3 code,
.post h4 tt,
.post h4 code,
.post h5 tt,
.post h5 code,
.post h6 tt,
.post h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}

.post ul.no-list,
.post ol.no-list {
  padding: 0;
  list-style-type: none;
}

.post ol[type="1"] {
  list-style-type: decimal;
}

.post ol[type="a"] {
  list-style-type: lower-alpha;
}

.post ol[type="i"] {
  list-style-type: lower-roman;
}

.post div > ol:not([type]) {
  list-style-type: decimal;
}

.post ul ul,
.post ul ol,
.post ol ol,
.post ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.post li > p {
  margin-top: 16px;
}

.post li + li {
  margin-top: 0.25em;
}

.post dl {
  padding: 0;
}

.post dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

.post dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.post table th {
  font-weight: 600;
}

.post table th,
.post table td {
  padding: 6px 13px;
  border: 1px solid #30363d;
}

.post table tr {
  background-color: #0d1117;
  border-top: 1px solid #21262d;
}

.post table tr:nth-child(2n) {
  background-color: #161b22;
}

.post table img {
  background-color: transparent;
}

.post img[align="right"] {
  padding-left: 20px;
}

.post img[align="left"] {
  padding-right: 20px;
}

.post .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}

.post span.frame {
  display: block;
  overflow: hidden;
}

.post span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #30363d;
}

.post span.frame span img {
  display: block;
  float: left;
}

.post span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: #c9d1d9;
}

.post span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

.post span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

.post span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

.post span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

.post span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

.post span.align-right span img {
  margin: 0;
  text-align: right;
}

.post span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

.post span.float-left span {
  margin: 13px 0 0;
}

.post span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

.post span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

.post code,
.post tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(110, 118, 129, 0.4);
  border-radius: 6px;
}

.post code br,
.post tt br {
  display: none;
}

.post del code {
  text-decoration: inherit;
}

.post pre code {
  font-size: 100%;
}

.post pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.post .highlight {
  margin-bottom: 16px;
}

.post .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.post .highlight pre,
.post pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #161b22;
  border-radius: 6px;
}

.post pre code,
.post pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.post .csv-data td,
.post .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.post .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: #0d1117;
  border: 0;
}

.post .csv-data tr {
  border-top: 0;
}

.post .csv-data th {
  font-weight: 600;
  background: #161b22;
  border-top: 0;
}

.post .footnotes {
  font-size: 12px;
  color: #8b949e;
  border-top: 1px solid #30363d;
}

.post .footnotes ol {
  padding-left: 16px;
}

.post .footnotes li {
  position: relative;
}

.post .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: "";
  border: 2px solid #1f6feb;
  border-radius: 6px;
}

.post .footnotes li:target {
  color: #c9d1d9;
}

.post .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}

.post .task-list-item {
  list-style-type: none;
}

.post .task-list-item label {
  font-weight: 400;
}

.post .task-list-item.enabled label {
  cursor: pointer;
}

.post .task-list-item + .task-list-item {
  margin-top: 3px;
}

.post .task-list-item .handle {
  display: none;
}

.post .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}

.post .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
}

.post ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}

/**
 *  website style
 **/

:root {
  --main-bg-color: #0d1117;
  --main-color: #888;
  --second-color: #e9cd4c;
  --link-visited-color: #464646;

  --space-1: 8px;

  --larger-font-size: 18px;
  --font-size: 14px;
  --small-font-size: 12px;
}

::selection {
  color: #fff;
  background: var(--second-color);
}

body {
  max-width: 680px;
  margin: 0 auto;
  background-color: var(--main-bg-color);
  color: var(--main-color);
  padding: 0 calc(var(--space-1) * 2);
}

/** nav **/
.nav {
  margin: calc(var(--space-1) * 3) 0;
  padding: var(--space-1) 0;
  opacity: 0.5;
}
.nav:hover {
  opacity: 1;
}
.nav--item {
  font-size: var(--larger-font-size);
  color: var(--second-color);
  margin-right: calc(var(--space-1) * 2);
  text-shadow: #033a16 0 0 1px;
  font-weight: bolder;
  text-decoration: none;
}
.nav--item:hover {
  text-decoration: underline;
}

/** post info **/
.post-info {
  margin: calc(var(--space-1) * 3) 0;
  padding: var(--space-1) 0;
  opacity: 0.5;
}
.post-info:hover {
  opacity: 1;
}
.post-info--date,
.post-list--item--date {
  font-size: var(--font-size);
  margin-right: calc(var(--space-1) * 2);
  color: var(--second-color);
  border-bottom: 1px dashed var(--second-color);
}
.post-info--tags {
  font-size: var(--small-font-size);
}

/** post list **/
.post-list {
  list-style: none;
}
.post-list--item {
  margin-bottom: calc(var(--space-1) * 2);
}
.post-list--item--link {
  display: block;
  text-decoration: none;
  color: var(--main-color);
  margin-bottom: calc(var(--space-1) / 2);
}
.post-list--item--link:visited {
  color: var(--link-visited-color);
}
.post-list--item--link:hover {
  color: var(--second-color);
  text-decoration: underline;
}
.post-list--item--title {
  font-size: var(--larger-font-size);
}
.post-list--item--date {
  opacity: 0.5;
}

/** slogan **/

.footer {
  margin-top: calc(var(--space-1) * 8);
}
.slogan {
  display: inline-block;
  text-decoration: none;
  color: var(--main-color);
  font-size: var(--font-size);
  line-height: 2;
  opacity: 0.3;
}
.slogan:hover {
  text-decoration: underline;
}