.giscus {
  margin-top: 2rem;
}

:root {
  --rouge-comment: #389d33;
  --rouge-string: #e15a5a;
  --rouge-number-muted: #e15a5a;
  --rouge-tag: #64b1a3;
  --rouge-class: #64b1a3;
  --rouge-function: #64b1a3;
  --rouge-keyword: #d5cc50;
  --rouge-string-escape: #d5cc50;
  --rouge-number: #dfd6c5;
  --rouge-punctuation: #ece2ce;
  --rouge-name: #cbcbcb;
  --rouge-plain: #cbcbcb;
  --rouge-code: #e9deca;
  --rouge-surface: #050607;
  --rouge-surface-raised: #0a0c0d;
  --rouge-gutter: #080a0b;
  --rouge-border: #15191b;
  --rouge-divider: #23282b;
  --rouge-gutter-text: #556067;
  --rouge-label: #909aa2;
  --rouge-shadow: rgba(0, 0, 0, 0.42);
}



.highlighter-rouge {
    color: #8dc9ff;
}

code, kbd, pre, samp {
    font-family: Arial;
    font-size: 1em;
}

html:not([data-mode]), html[data-mode=dark] {
  --code-color: var(--rouge-code);
  --link-color: #74bad1;
  --link-underline-color: #839db5;
}

#page-category a:hover, #page-tag a:hover, #access-lastmod a:hover, .post-tail-wrapper .license-wrapper>a:hover, #search-results a:hover, footer a:hover, #topbar #breadcrumb a:hover, .post-meta a:not([class]):hover, .content a:not(.img-link):hover {
  color: #ff7676  !important;
  border-bottom: 1px solid #ff7676 ;
}

html:not([data-mode]) div.highlighter-rouge,
html[data-mode=dark] div.highlighter-rouge {
  background: var(--rouge-surface);
  border: 1px solid var(--rouge-border);
  border-radius: 18px;
  box-shadow: 0 18px 38px var(--rouge-shadow);
  overflow: hidden;
}

html:not([data-mode]) div.highlighter-rouge > .code-header,
html[data-mode=dark] div.highlighter-rouge > .code-header {
  align-items: center;
  background: linear-gradient(180deg, #0d1011 0%, var(--rouge-surface-raised) 100%);
  border-bottom: 1px solid var(--rouge-border);
  color: var(--rouge-label);
}

html:not([data-mode]) div.highlighter-rouge > .code-header span,
html[data-mode=dark] div.highlighter-rouge > .code-header span {
  color: var(--rouge-label);
  letter-spacing: 0.06em;
}

html:not([data-mode]) div.highlighter-rouge > .code-header button,
html[data-mode=dark] div.highlighter-rouge > .code-header button {
  border-left: 1px solid var(--rouge-border);
  color: var(--rouge-label);
}

html:not([data-mode]) div.highlighter-rouge > .code-header button:hover,
html[data-mode=dark] div.highlighter-rouge > .code-header button:hover {
  color: var(--rouge-class);
}

html:not([data-mode]) div.highlighter-rouge > .highlight,
html:not([data-mode]) div.highlighter-rouge > .highlight code,
html:not([data-mode]) div.highlighter-rouge > .highlight pre,
html:not([data-mode]) div.highlighter-rouge > .highlight table,
html:not([data-mode]) div.highlighter-rouge > .highlight td,
html[data-mode=dark] div.highlighter-rouge > .highlight,
html[data-mode=dark] div.highlighter-rouge > .highlight code,
html[data-mode=dark] div.highlighter-rouge > .highlight pre,
html[data-mode=dark] div.highlighter-rouge > .highlight table,
html[data-mode=dark] div.highlighter-rouge > .highlight td {
  background: transparent;
}

html:not([data-mode]) div.highlighter-rouge .rouge-gutter,
html[data-mode=dark] div.highlighter-rouge .rouge-gutter {
  background: var(--rouge-gutter);
  border-right: 1px solid var(--rouge-divider);
}

html:not([data-mode]) div.highlighter-rouge .rouge-gutter pre,
html[data-mode=dark] div.highlighter-rouge .rouge-gutter pre {
  color: var(--rouge-gutter-text);
}

html:not([data-mode]) div.highlighter-rouge .rouge-code pre,
html[data-mode=dark] div.highlighter-rouge .rouge-code pre {
  color: var(--rouge-plain);
}

:is(html[data-mode], html:not([data-mode])) .highlight .c,
:is(html[data-mode], html:not([data-mode])) .highlight .c1,
:is(html[data-mode], html:not([data-mode])) .highlight .cm,
:is(html[data-mode], html:not([data-mode])) .highlight .cs {
  color: var(--rouge-comment);
}

:is(html[data-mode], html:not([data-mode])) .highlight .m,
:is(html[data-mode], html:not([data-mode])) .highlight .cp,
:is(html[data-mode], html:not([data-mode])) .highlight .cpf {
  color: var(--rouge-number-muted);
}

:is(html[data-mode], html:not([data-mode])) .highlight .m {
  color: var(--rouge-number);
}

:is(html[data-mode], html:not([data-mode])) .highlight .s,
:is(html[data-mode], html:not([data-mode])) .highlight .s2,
:is(html[data-mode], html:not([data-mode])) .highlight .sa,
:is(html[data-mode], html:not([data-mode])) .highlight .sb,
:is(html[data-mode], html:not([data-mode])) .highlight .sc,
:is(html[data-mode], html:not([data-mode])) .highlight .sd,
:is(html[data-mode], html:not([data-mode])) .highlight .se,
:is(html[data-mode], html:not([data-mode])) .highlight .sh,
:is(html[data-mode], html:not([data-mode])) .highlight .si,
:is(html[data-mode], html:not([data-mode])) .highlight .ss,
:is(html[data-mode], html:not([data-mode])) .highlight .sx {
  color: var(--rouge-string-escape);
}


:is(html[data-mode], html:not([data-mode])) .highlight .s,
:is(html[data-mode], html:not([data-mode])) .highlight .s1,
:is(html[data-mode], html:not([data-mode])) .highlight .sr,
:is(html[data-mode], html:not([data-mode])) .highlight .dl {
  color: var(--rouge-string);
}

:is(html[data-mode], html:not([data-mode])) .highlight .p {
  color: var(--rouge-punctuation);
}

:is(html[data-mode], html:not([data-mode])) .highlight .n{
  color: var(--rouge-name);
}

:is(html[data-mode], html:not([data-mode])) .highlight .nv,
:is(html[data-mode], html:not([data-mode])) .highlight .nx,
:is(html[data-mode], html:not([data-mode])) .highlight .py,
:is(html[data-mode], html:not([data-mode])) .highlight .bp,
:is(html[data-mode], html:not([data-mode])) .highlight .vc,
:is(html[data-mode], html:not([data-mode])) .highlight .vg,
:is(html[data-mode], html:not([data-mode])) .highlight .vi {
  color: var(--rouge-plain);
}

:is(html[data-mode], html:not([data-mode])) .highlight .nn {
  color: var(--rouge-plain);
}

:is(html[data-mode], html:not([data-mode])) .highlight .nt {
  color: var(--rouge-tag);
}

:is(html[data-mode], html:not([data-mode])) .highlight .na {
  color: var(--rouge-plain);
}

:is(html[data-mode], html:not([data-mode])) .highlight .nc,
:is(html[data-mode], html:not([data-mode])) .highlight .fm {
  color: var(--rouge-class);
}

:is(html[data-mode], html:not([data-mode])) .highlight .nf {
  color: var(--rouge-function);
}

:is(html[data-mode], html:not([data-mode])) .highlight .k,
:is(html[data-mode], html:not([data-mode])) .highlight .kc,
:is(html[data-mode], html:not([data-mode])) .highlight .kd,
:is(html[data-mode], html:not([data-mode])) .highlight .kn,
:is(html[data-mode], html:not([data-mode])) .highlight .kp,
:is(html[data-mode], html:not([data-mode])) .highlight .kr,
:is(html[data-mode], html:not([data-mode])) .highlight .kt,
:is(html[data-mode], html:not([data-mode])) .highlight .ow {
  color: var(--rouge-keyword);
}