[data-scheme=light] {
    --pre-text-color: #272822;
    --pre-background-color: #fafafa
}



[data-scheme=light] .chroma {
    color: #272822;
    background-color: #fafafa
}

[data-scheme=light] .chroma .err {
    color: #960050
}

[data-scheme=light] .chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0
}

[data-scheme=light] .chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block
}

[data-scheme=light] .chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffc
}

[data-scheme=light] .chroma .lnt {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f
}

[data-scheme=light] .chroma .ln {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f
}

[data-scheme=light] .chroma .k {
    color: #00a8c8
}

[data-scheme=light] .chroma .kc {
    color: #00a8c8
}

[data-scheme=light] .chroma .kd {
    color: #00a8c8
}

[data-scheme=light] .chroma .kn {
    color: #f92672
}

[data-scheme=light] .chroma .kp {
    color: #00a8c8
}

[data-scheme=light] .chroma .kr {
    color: #00a8c8
}

[data-scheme=light] .chroma .kt {
    color: #00a8c8
}

[data-scheme=light] .chroma .n {
    color: #111
}

[data-scheme=light] .chroma .na {
    color: #75af00
}

[data-scheme=light] .chroma .nb {
    color: #111
}

[data-scheme=light] .chroma .bp {
    color: #111
}

[data-scheme=light] .chroma .nc {
    color: #75af00
}

[data-scheme=light] .chroma .no {
    color: #00a8c8
}

[data-scheme=light] .chroma .nd {
    color: #75af00
}

[data-scheme=light] .chroma .ni {
    color: #111
}

[data-scheme=light] .chroma .ne {
    color: #75af00
}

[data-scheme=light] .chroma .nf {
    color: #75af00
}

[data-scheme=light] .chroma .fm {
    color: #111
}

[data-scheme=light] .chroma .nl {
    color: #111
}

[data-scheme=light] .chroma .nn {
    color: #111
}

[data-scheme=light] .chroma .nx {
    color: #75af00
}

[data-scheme=light] .chroma .py {
    color: #111
}

[data-scheme=light] .chroma .nt {
    color: #f92672
}

[data-scheme=light] .chroma .nv {
    color: #111
}

[data-scheme=light] .chroma .vc {
    color: #111
}

[data-scheme=light] .chroma .vg {
    color: #111
}

[data-scheme=light] .chroma .vi {
    color: #111
}

[data-scheme=light] .chroma .vm {
    color: #111
}

[data-scheme=light] .chroma .l {
    color: #ae81ff
}

[data-scheme=light] .chroma .ld {
    color: #d88200
}

[data-scheme=light] .chroma .s {
    color: #d88200
}

[data-scheme=light] .chroma .sa {
    color: #d88200
}

[data-scheme=light] .chroma .sb {
    color: #d88200
}

[data-scheme=light] .chroma .sc {
    color: #d88200
}

[data-scheme=light] .chroma .dl {
    color: #d88200
}

[data-scheme=light] .chroma .sd {
    color: #d88200
}

[data-scheme=light] .chroma .s2 {
    color: #d88200
}

[data-scheme=light] .chroma .se {
    color: #8045ff
}

[data-scheme=light] .chroma .sh {
    color: #d88200
}

[data-scheme=light] .chroma .si {
    color: #d88200
}

[data-scheme=light] .chroma .sx {
    color: #d88200
}

[data-scheme=light] .chroma .sr {
    color: #d88200
}

[data-scheme=light] .chroma .s1 {
    color: #d88200
}

[data-scheme=light] .chroma .ss {
    color: #d88200
}

[data-scheme=light] .chroma .m {
    color: #ae81ff
}

[data-scheme=light] .chroma .mb {
    color: #ae81ff
}

[data-scheme=light] .chroma .mf {
    color: #ae81ff
}

[data-scheme=light] .chroma .mh {
    color: #ae81ff
}

[data-scheme=light] .chroma .mi {
    color: #ae81ff
}

[data-scheme=light] .chroma .il {
    color: #ae81ff
}

[data-scheme=light] .chroma .mo {
    color: #ae81ff
}

[data-scheme=light] .chroma .o {
    color: #f92672
}

[data-scheme=light] .chroma .ow {
    color: #f92672
}

[data-scheme=light] .chroma .p {
    color: #111
}

[data-scheme=light] .chroma .c {
    color: #75715e
}

[data-scheme=light] .chroma .ch {
    color: #75715e
}

[data-scheme=light] .chroma .cm {
    color: #75715e
}

[data-scheme=light] .chroma .c1 {
    color: #75715e
}

[data-scheme=light] .chroma .cs {
    color: #75715e
}

[data-scheme=light] .chroma .cp {
    color: #75715e
}

[data-scheme=light] .chroma .cpf {
    color: #75715e
}

[data-scheme=light] .chroma .ge {
    font-style: italic
}

[data-scheme=light] .chroma .gs {
    font-weight: 700
}

[data-scheme=dark] {
    --pre-text-color: #f8f8f2;
    --pre-background-color: #272822
}

[data-scheme=dark] .chroma {
    color: #f8f8f2;
    background-color: #272822
}

[data-scheme=dark] .chroma .err {
    color: #bb0064
}

[data-scheme=dark] .chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0
}

[data-scheme=dark] .chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block
}

[data-scheme=dark] .chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffc
}

[data-scheme=dark] .chroma .lnt {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f
}

[data-scheme=dark] .chroma .ln {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f
}

[data-scheme=dark] .chroma .k {
    color: #66d9ef
}

[data-scheme=dark] .chroma .kc {
    color: #66d9ef
}

[data-scheme=dark] .chroma .kd {
    color: #66d9ef
}

[data-scheme=dark] .chroma .kn {
    color: #f92672
}

[data-scheme=dark] .chroma .kp {
    color: #66d9ef
}

[data-scheme=dark] .chroma .kr {
    color: #66d9ef
}

[data-scheme=dark] .chroma .kt {
    color: #66d9ef
}

[data-scheme=dark] .chroma .na {
    color: #a6e22e
}

[data-scheme=dark] .chroma .nc {
    color: #a6e22e
}

[data-scheme=dark] .chroma .no {
    color: #66d9ef
}

[data-scheme=dark] .chroma .nd {
    color: #a6e22e
}

[data-scheme=dark] .chroma .ne {
    color: #a6e22e
}

[data-scheme=dark] .chroma .nf {
    color: #a6e22e
}

[data-scheme=dark] .chroma .nx {
    color: #a6e22e
}

[data-scheme=dark] .chroma .nt {
    color: #f92672
}

[data-scheme=dark] .chroma .l {
    color: #ae81ff
}

[data-scheme=dark] .chroma .ld {
    color: #e6db74
}

[data-scheme=dark] .chroma .s {
    color: #e6db74
}

[data-scheme=dark] .chroma .sa {
    color: #e6db74
}

[data-scheme=dark] .chroma .sb {
    color: #e6db74
}

[data-scheme=dark] .chroma .sc {
    color: #e6db74
}

[data-scheme=dark] .chroma .dl {
    color: #e6db74
}

[data-scheme=dark] .chroma .sd {
    color: #e6db74
}

[data-scheme=dark] .chroma .s2 {
    color: #e6db74
}

[data-scheme=dark] .chroma .se {
    color: #ae81ff
}

[data-scheme=dark] .chroma .sh {
    color: #e6db74
}

[data-scheme=dark] .chroma .si {
    color: #e6db74
}

[data-scheme=dark] .chroma .sx {
    color: #e6db74
}

[data-scheme=dark] .chroma .sr {
    color: #e6db74
}

[data-scheme=dark] .chroma .s1 {
    color: #e6db74
}

[data-scheme=dark] .chroma .ss {
    color: #e6db74
}

[data-scheme=dark] .chroma .m {
    color: #ae81ff
}

[data-scheme=dark] .chroma .mb {
    color: #ae81ff
}

[data-scheme=dark] .chroma .mf {
    color: #ae81ff
}

[data-scheme=dark] .chroma .mh {
    color: #ae81ff
}

[data-scheme=dark] .chroma .mi {
    color: #ae81ff
}

[data-scheme=dark] .chroma .il {
    color: #ae81ff
}

[data-scheme=dark] .chroma .mo {
    color: #ae81ff
}

[data-scheme=dark] .chroma .o {
    color: #f92672
}

[data-scheme=dark] .chroma .ow {
    color: #f92672
}

[data-scheme=dark] .chroma .c {
    color: #75715e
}

[data-scheme=dark] .chroma .ch {
    color: #75715e
}

[data-scheme=dark] .chroma .cm {
    color: #75715e
}

[data-scheme=dark] .chroma .c1 {
    color: #75715e
}

[data-scheme=dark] .chroma .cs {
    color: #75715e
}

[data-scheme=dark] .chroma .cp {
    color: #75715e
}

[data-scheme=dark] .chroma .cpf {
    color: #75715e
}

[data-scheme=dark] .chroma .gd {
    color: #f92672
}

[data-scheme=dark] .chroma .ge {
    font-style: italic
}

[data-scheme=dark] .chroma .gi {
    color: #a6e22e
}

[data-scheme=dark] .chroma .gs {
    font-weight: 700
}

[data-scheme=dark] .chroma .gu {
    color: #75715e
}


:root {
    --body-background: #f5f5fa;
    --accent-color: #34495e;
    --accent-color-darker: #2c3e50;
    --accent-color-text: #fff;
    --body-text-color: #bababa;
    --tag-border-radius: 4px;
    --section-separation: 40px
}

@media (min-width: 813px) {
    :root {
        --main-top-padding: 35px
    }
}

@media (min-width: 1920px) {
    :root {
        --main-top-padding: 50px
    }
}

:root [data-scheme=dark] {
    --body-background: #303030;
    --accent-color: #ecf0f1;
    --accent-color-darker: #bdc3c7;
    --accent-color-text: #000;
    --body-text-color: rgba(255, 255, 255, 0.7)
}

:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
    --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace
}

:root {
    --card-background: #fff;
    --card-background-selected: #eaeaea;
    --card-text-color-main: #000;
    --card-text-color-secondary: #747474;
    --card-text-color-tertiary: #bababa;
    --card-separator-color: rgba(218, 218, 218, 0.5);
    --card-border-radius: 10px;
    --card-padding: 30px;
    --small-card-padding: 25px
}

@media (max-width: 1920px) {
    :root {
        --card-padding: 20px
    }
}

@media (max-width: 1024px) {
    :root {
        --card-padding: 20px
    }
}

@media (max-width: 1024px) {
    :root {
        --small-card-padding: 25px 20px
    }
}

:root [data-scheme=dark] {
    --card-background: #424242;
    --card-background-selected: rgba(255, 255, 255, 0.16);
    --card-text-color-main: rgba(255, 255, 255, 0.9);
    --card-text-color-secondary: rgba(255, 255, 255, 0.7);
    --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
    --card-separator-color: rgba(255, 255, 255, 0.12)
}

:root {
    --article-font-family: var(--base-font-family);
    --article-font-size: 1.7rem;
    --article-line-height: 1.85
}

@media (max-width: 1024px) {
    :root {
        --article-font-size: 1.6rem
    }
}

:root {
    --blockquote-border-size: 4px;
    --blockquote-background-color: rgb(248 248 248);
    --heading-border-size: 4px;
    --link-background-color: 189, 195, 199;
    --link-background-opacity: 0.5;
    --link-background-opacity-hover: 0.7;
    --pre-background-color: #272822;
    --pre-text-color: #f8f8f2;
    --code-background-color: rgba(0, 0, 0, 0.12);
    --code-text-color: #808080;
    --table-border-color: #dadada;
    --tr-even-background-color: #efefee
}

:root [data-scheme=dark] {
    --code-background-color: #272822;
    --code-text-color: rgba(255, 255, 255, 0.9);
    --table-border-color: #717171;
    --tr-even-background-color: #545454;
    --blockquote-background-color: rgb(75 75 75)
}

:root {
    --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
    --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)
}

.container {
    margin-left: auto;
    margin-right: auto
}

/* 至少1024的时候*/
@media (min-width: 812px) {
    .container.extended {
        max-width: 80%
    }

    .main {
        width: 75%
    }
    .container.extended .right-sidebar {
        width: 25%
    }
}

@media (max-width: 812px) {
    .main {
        display:none
    }
}

/*@media (max-width: 1024px) {*/
    /*.container.extended {*/
        /*max-width: 70%*/
    /*}*/

    /*.container.extended .right-sidebar {*/
        /*width: 100%*/
    /*}*/
/*}*/







.flex {
    display: flex;
    flex-direction: row
}

.flex.column {
    flex-direction: column
}

@media (max-width: 812px) {
    .flex.on-phone--column {
        flex-direction: column
    }
}

.flex.align-items--flex-start {
    align-items: flex-start
}

.flex .grow {
    flex-grow: 1
}

.flex .do-not-shrink {
    flex-shrink: 0
}

.flex .do-not-overflow {
    min-width: 0;
    flex-shrink: 1;
    max-width: 100%
}

.flex .full-width {
    width: 100%
}

main.main {
    min-width: 0;
    padding: 0 15px;
    max-width: 100%;
    flex-grow: 1;
    padding-top: var(--main-top-padding)
}

.main-container {
    min-height: 100vh
}

/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

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

b, strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

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

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

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

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

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

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

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

/*/* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers*/
.hamburger {
    padding-top: 10px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: .7
}

.hamburger.is-active:hover {
    opacity: .7
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before {
    background-color: #000
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px
}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
    width: 30px;
    height: 2px;
    background-color: var(--card-text-color-main);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: ease
}

.hamburger-inner::after, .hamburger-inner::before {
    content: "";
    display: block
}

.hamburger-inner::before {
    top: -10px
}

.hamburger-inner::after {
    bottom: -10px
}

.hamburger--spin .hamburger-inner {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}

.hamburger--spin .hamburger-inner::before {
    transition: top .1s .25s ease-in, opacity .1s ease-in
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19)
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top .1s ease-out, opacity .1s .12s ease-out
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1)
}

#toggle-menu {
    background: 0 0;
    border: none;
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 2;
    cursor: pointer;
    outline: 0
}

@media (min-width: 813px) {
    #toggle-menu {
        display: none
    }
}

#toggle-menu.is-active .hamburger-inner, #toggle-menu.is-active .hamburger-inner::after, #toggle-menu.is-active .hamburger-inner::before {
    background-color: var(--accent-color)
}

.article-list {
    display: flex;
    flex-direction: column
}

.article-list article {
    display: flex;
    flex-direction: column;
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    transition: box-shadow .3s ease
}

.article-list article:hover {
    box-shadow: var(--shadow-l2)
}

.article-list article:not(:last-of-type) {
    margin-bottom: var(--section-separation)
}

.article-list article .article-image img {
    width: 100%;
    height: 200px;
    object-fit: cover
}

@media (max-width: 1024px) {
    .article-list article .article-image img {
        height: 150px
    }
}

@media (min-width: 1920px) {
    .article-list article .article-image img {
        height: 250px
    }
}

.article-list article:nth-child(5n+1) .article-category a {
    background: #8ea885;
    color: #fff
}

.article-list article:nth-child(5n+2) .article-category a {
    background: #df7988;
    color: #fff
}

.article-list article:nth-child(5n+3) .article-category a {
    background: #0177b8;
    color: #fff
}

.article-list article:nth-child(5n+4) .article-category a {
    background: #ffb900;
    color: #fff
}

.article-list article:nth-child(5n+5) .article-category a {
    background: #6b69d6;
    color: #fff
}

.article-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--card-padding)
}

.article-title {
    font-weight: 600;
    margin: 10px 0;
    color: var(--card-text-color-main);
    font-size: 2.2rem
}

@media (min-width: 1920px) {
    .article-title {
        font-size: 2.4rem
    }
}

.article-title a {
    color: var(--card-text-color-main)
}

.article-title a:hover {
    color: var(--card-text-color-main)
}

.article-title + .article-subtitle {
    margin-top: 0
}

.article-subtitle {
    font-weight: 400;
    color: var(--card-text-color-secondary);
    margin: 5px 0;
    line-height: 1.5;
    font-size: 1.75rem
}

@media (min-width: 1920px) {
    .article-subtitle {
        font-size: 2rem
    }
}

.article-time {
    display: flex;
    align-items: center;
    color: var(--card-text-color-tertiary);
    margin-top: 10px
}

.article-time svg {
    vertical-align: middle;
    margin-right: 15px;
    width: 20px;
    height: 20px;
    stroke-width: 1.33
}

.article-time time {
    font-size: 1.4rem
}

.article-category a, .article-tags a {
    color: var(--accent-color-text);
    background-color: var(--accent-color);
    padding: 8px 16px;
    border-radius: var(--tag-border-radius);
    display: inline-block;
    font-size: 1.4rem;
    margin-right: 10px;
    margin-bottom: 10px;
    transition: background-color .5s ease
}

.article-category a:hover, .article-tags a:hover {
    color: var(--accent-color-text);
    background-color: var(--accent-color-darker)
}

.article-list--compact {
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    background-color: var(--card-background);
    --image-size: 60px
}

@media (max-width: 1024px) {
    .article-list--compact {
        --image-size: 50px
    }
}

.article-list--compact + .pagination {
    margin-top: var(--section-separation)
}

.article-list--compact article > a {
    display: flex;
    align-items: center;
    padding: var(--small-card-padding)
}

.article-list--compact article:not(:last-of-type) {
    border-bottom: 1.5px solid var(--card-separator-color)
}

.article-list--compact article .article-details {
    flex-grow: 1;
    padding: 0;
    padding-right: 15px;
    min-height: var(--image-size)
}

.article-list--compact article .article-title {
    margin: 0;
    font-size: 1.8rem
}

@media (max-width: 1024px) {
    .article-list--compact article .article-title {
        font-size: 1.6rem
    }
}

.article-list--compact article .article-image img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover
}

.article-list--compact article .article-time {
    font-size: 1.4rem
}

.article-list--compact article .article-preview {
    font-size: 1.4rem;
    color: var(--card-text-color-tertiary);
    margin-top: 10px;
    line-height: 1.5
}

.article-list--tile article {
    border-radius: var(--card-border-radius);
    overflow: hidden;
    position: relative;
    height: 350px;
    width: 250px;
    box-shadow: var(--shadow-l1);
    transition: box-shadow .3s ease;
    background-color: var(--card-background)
}

.article-list--tile article:hover {
    box-shadow: var(--shadow-l2)
}

.article-list--tile article.has-image .article-details {
    background-color: rgba(0, 0, 0, .25)
}

.article-list--tile article.has-image .article-title {
    color: #fff
}

.article-list--tile article .article-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.article-list--tile article .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.article-list--tile article .article-details {
    border-radius: var(--card-border-radius);
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    padding: 20px
}

@media (max-width: 812px) {
    .article-list--tile article .article-details {
        padding: 15px
    }
}

.article-list--tile article .article-title {
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--card-text-color-main)
}

@media (max-width: 812px) {
    .article-list--tile article .article-title {
        font-size: 2rem
    }
}



.tagCloud .tagCloud-tags {
    display: flex;
    flex-wrap: wrap
}

.tagCloud .tagCloud-tags a {
    background: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--tag-border-radius);
    padding: 8px 20px;
    color: var(--card-text-color-main);
    margin-bottom: 10px;
    margin-right: 5px;
    font-size: 1.4rem;
    transition: box-shadow .3s ease
}

.tagCloud .tagCloud-tags a:hover {
    box-shadow: var(--shadow-l2)
}

.widget.archives .widget-archive--list {
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    background-color: var(--card-background)
}

.widget.archives .archives-year:not(:last-of-type) {
    border-bottom: 1.5px solid var(--card-separator-color)
}

.widget.archives .archives-year a {
    font-size: 1.4rem;
    padding: 18px 25px;
    display: flex
}

.widget.archives .archives-year a span.year {
    flex: 1;
    color: var(--card-text-color-main);
    font-weight: 700
}

.widget.archives .archives-year a span.count {
    color: var(--card-text-color-tertiary)
}

footer.site-footer {
    padding: 20px 0 var(--section-separation);
    font-size: 1.4rem;
    line-height: 1.75;
    margin-top: var(--section-separation)
}

footer.site-footer:before {
    content: "";
    display: block;
    height: 3px;
    width: 50px;
    background: var(--body-text-color);
    margin-bottom: 20px
}

footer.site-footer .copyright {
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 5px
}

footer.site-footer .powerby {
    color: var(--body-text-color);
    font-weight: 400;
    font-size: 1.2rem
}

footer.site-footer .powerby a {
    color: var(--body-text-color)
}

.pagination {
    display: flex;
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    flex-wrap: wrap;
    margin: var(--section-separation) 0
}

.pagination .page-link {
    padding: 16px 32px;
    display: inline-flex;
    color: var(--card-text-color-secondary)
}

.pagination .page-link.current {
    font-weight: 700;
    background-color: var(--card-background-selected);
    color: var(--card-text-color-main)
}

.sidebar {
    padding: 0 15px
}

@media (min-width: 813px) {
    .sidebar.sticky {
        position: sticky
    }
}

.left-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    --sidebar-avatar-size: 150px;
    --sidebar-element-separation: 25px
}

@media (max-width: 1920px) {
    .left-sidebar {
        --sidebar-avatar-size: 120px;
        --sidebar-element-separation: 20px
    }
}

@media (max-width: 812px) {
    .left-sidebar {
        width: 100%;
        padding: 30px 0;
        max-width: none
    }
}

.left-sidebar.sticky {
    top: 0
}

@media (min-width: 813px) {
    .left-sidebar {
        margin-right: 1%;
        padding: var(--main-top-padding) 15px;
        max-height: 100vh
    }
}

.right-sidebar {
    flex-shrink: 0
}

.right-sidebar.sticky {
    top: 0
}

/*@media (max-width: 1518px) {*/
    /*.right-sidebar {*/
        /*display: none*/
    /*}*/
/*}*/

@media (min-width: 1024px) {
    .right-sidebar {
        margin-left: 1%;
        padding-top: var(--main-top-padding)
    }
}

.site-info {
    z-index: 1;
    transition: box-shadow .5s ease
}

@media (max-width: 812px) {
    .site-info {
        padding: 15px 30px
    }
}

.site-info .site-avatar {
    position: relative;
    margin: 0;
    width: var(--sidebar-avatar-size);
    height: var(--sidebar-avatar-size);
    margin-bottom: var(--sidebar-element-separation)
}

.site-info .site-avatar .site-logo {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    box-shadow: var(--shadow-l1)
}

.site-info .site-avatar .emoji {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    bottom: 0;
    right: 0;
    text-align: center;
    font-size: 20px;
    background-color: var(--card-background);
    box-shadow: var(--shadow-l2)
}

@media (max-width: 1920px) {
    .site-info .site-avatar .emoji {
        width: 40px;
        height: 40px;
        line-height: 40px
    }
}

.site-info .site-name {
    color: var(--accent-color);
    font-size: 2.4rem;
    margin: 0
}

@media (max-width: 1920px) {
    .site-info .site-name {
        font-size: 2rem
    }
}

.site-info .site-description {
    color: var(--body-text-color);
    font-weight: 400;
    margin: 10px 0;
    font-size: 1.8rem
}

@media (max-width: 1920px) {
    .site-info .site-description {
        font-size: 1.6rem
    }
}

.sidebar .widget {
    margin-bottom: var(--section-separation)
}

.sidebar .widget:not(:last-of-type):after {
    content: "";
    width: 100px;
    height: 2px;
    background-color: var(--body-text-color);
    display: block;
    margin-top: var(--section-separation)
}

[data-scheme=dark] #dark-mode-toggle {
    color: var(--accent-color);
    font-weight: 700
}

[data-scheme=dark] #dark-mode-toggle .icon-tabler-toggle-left {
    display: none
}

[data-scheme=dark] #dark-mode-toggle .icon-tabler-toggle-right {
    display: unset
}

#dark-mode-toggle {
    margin-top: auto;
    color: var(--body-text-color);
    display: flex;
    align-items: center;
    cursor: pointer
}

#dark-mode-toggle .icon-tabler-toggle-right {
    display: none
}

html {
    font-size: 62.5%;
    overflow-y: scroll
}

* {
    box-sizing: border-box
}

body {
    background: var(--body-background);
    margin: 0;
    font-family: var(--base-font-family);
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.archives-group {
    margin-bottom: var(--section-separation)
}

@media (min-width: 812px) and (max-width: 1024px) {
    .keep-sidebar {
        --main-top-padding: 50px
    }
}

@media (max-width: 1024px) {
    .article-page.with-toolbar {
        --main-top-padding: 0
    }
}

@media (max-width: 1024px) {
    .article-page:not(.keep-sidebar) .left-sidebar {
        display: none
    }
}

.article-page .article-sidebar {
    position: sticky;
    top: 50px;
    flex-shrink: 0
}

@media (max-width: 1024px) {
    .article-page .article-sidebar {
        display: none
    }
}

@media (min-width: 1024px) {
    .article-page .article-sidebar {
        padding-left: 15px;
        margin-left: 1%
    }
}

@media (min-width: 1024px) {
    .article-page .article-sidebar {
        width: 25%;
        margin-right: 1%
    }
}

@media (min-width: 1519px) {
    .article-page .article-sidebar {
        width: 30%
    }
}

.article-page .main-article {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    overflow: hidden
}

.article-page .main-article.main-article {
    margin-bottom: var(--section-separation)
}

.article-page .main-article .article-header .article-details {
    padding: var(--card-padding);
    padding-bottom: 0
}

.article-page .main-article .article-content {
    margin: var(--card-padding) 0;
    color: var(--card-text-color-main)
}

.article-page .main-article .article-content img {
    max-width: 100%;
    height: auto
}

.article-page .main-article .article-footer {
    margin: var(--card-padding);
    margin-top: 0
}

.article-page .main-article .article-footer section:not(:first-child) {
    margin-top: var(--card-padding)
}

.article-page .main-article .article-footer section {
    color: var(--card-text-color-tertiary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: 1.4rem
}

.article-page .main-article .article-footer section svg {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    stroke-width: 1.33
}

.article-page .main-article .article-footer .article-tags {
    flex-wrap: wrap;
    text-transform: unset
}

#article-toolbar {
    display: flex;
    align-items: center
}

@media (max-width: 1024px) {
    #article-toolbar {
        margin: 20px 0
    }
}

@media (min-width: 1024px) {
    #article-toolbar {
        display: none
    }
}

#article-toolbar .back-home {
    background: var(--card-background);
    border-radius: var(--tag-border-radius);
    color: var(--card-text-color-tertiary);
    margin-right: 30px;
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    text-transform: uppercase;
    padding: 10px 20px 10px 15px;
    transition: box-shadow .3s ease;
    box-shadow: var(--shadow-l1)
}

#article-toolbar .back-home:hover {
    box-shadow: var(--shadow-l2)
}

#article-toolbar .back-home svg {
    margin-right: 5px;
    width: 20px;
    height: 20px
}

#article-toolbar .back-home span {
    font-weight: 500
}

.related-contents--wrapper {
    margin-bottom: var(--section-separation)
}

.related-contents {
    overflow-x: auto;
    padding-bottom: 15px
}

.related-contents > .flex {
    float: left
}

.related-contents article {
    margin-right: 15px;
    flex-shrink: 0;
    overflow: hidden;
    width: 250px;
    height: 150px
}

.related-contents article .article-title {
    font-size: 1.8rem;
    margin: 0
}

.related-contents article.has-image .article-details {
    padding: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .75) 100%)
}

.article-content {
    font-family: var(--article-font-family);
    font-size: var(--article-font-size);
    padding: 0 var(--card-padding);
    line-height: var(--article-line-height)
}

.article-content > p {
    margin: 1.5em 1.0em 1.0em 2.4em;

}

.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
    margin-left: calc((var(--card-padding)) * -1);
    padding-left: calc(var(--card-padding) - var(--heading-border-size));
    border-left: var(--heading-border-size) solid var(--accent-color)
}

.article-content figure {
    text-align: center
}

.article-content figure figcaption {
    font-size: 1.4rem;
    color: var(--card-text-color-secondary)
}



.article-content blockquote {
    position: relative;
    margin: 1.5em 0;
    border-left: var(--blockquote-border-size) solid var(--card-separator-color);
    padding: 12px calc(var(--card-padding) - var(--blockquote-border-size));
    background-color: var(--blockquote-background-color)
}


.article-content hr {
    width: 100px;
    margin: 40px auto;
    background: var(--card-text-color-tertiary);
    height: 2px;
    border: 0;
    opacity: .55
}

.article-content code {
    color: var(--code-text-color);
    background-color: var(--code-background-color);
    padding: 2px 4px;
    border-radius: var(--tag-border-radius);
    font-family: var(--code-font-family)
}

.article-content .gallery {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1.5em 0
}

.article-content .gallery figure {
    margin: 0
}

.article-content .gallery figure + figure {
    margin-left: 10px
}

.article-content pre {
    overflow-x: auto;
    display: block;
    background-color: var(--pre-background-color);
    color: var(--pre-text-color);
    font-family: var(--code-font-family);
    line-height: 1.428571429;
    word-break: break-all;
    padding: var(--card-padding)
}

.article-content pre code {
    color: unset;
    border: none;
    background: 0 0;
    padding: 0
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1.5em;
    font-size: .96em
}

.article-content td, .article-content th {
    text-align: left;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--table-border-color)
}

.article-content td {
    vertical-align: top
}

.article-content tr:nth-child(even) {
    background-color: var(--tr-even-background-color)
}

.article-content .twitter-tweet {
    color: var(--card-text-color-main)
}

.article-content .video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden
}

.article-content .video-wrapper > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 0
}

.article-content .gallery, .article-content .s_video_simple, .article-content .video-wrapper, .article-content blockquote, .article-content figure, .article-content pre {
    margin-left: calc((var(--card-padding)) * -1);
    margin-right: calc((var(--card-padding)) * -1);
    width: calc(100% + var(--card-padding) * 2)
}

.section-card {
    border-radius: var(--card-border-radius);
    background-color: var(--card-background);
    padding: var(--small-card-padding);
    box-shadow: var(--shadow-l1);
    margin-bottom: var(--section-separation);
    display: flex;
    align-items: center;
    --separation: 15px
}

.section-card .section-term {
    font-size: 2.2rem;
    margin: 0;
    margin-top: calc(var(--separation) / 2);
    color: var(--card-text-color-main)
}

.section-card .section-term + .section-description {
    margin-top: var(--separation)
}

.section-card .section-description {
    font-weight: 400;
    color: var(--card-text-color-secondary);
    font-size: 1.6rem;
    margin: 0
}

.section-card .section-details {
    flex-grow: 1;
    margin-right: 20px
}

.section-card .section-image img {
    width: 60px;
    height: 60px
}

.section-card .section-count {
    color: var(--card-text-color-tertiary);
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase
}

.subsection-list {
    margin-bottom: var(--section-separation);
    overflow-x: auto
}

.subsection-list .article-list--tile {
    display: flex;
    padding-bottom: 15px
}

.subsection-list .article-list--tile article {
    width: 250px;
    height: 150px;
    margin-right: 20px;
    flex-shrink: 0
}

.subsection-list .article-list--tile article .article-title {
    margin: 0;
    font-size: 1.8rem
}

.subsection-list .article-list--tile article .article-details {
    padding: 20px
}

.not-found-card {
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding)
}

.search-form {
    margin-bottom: var(--section-separation);
    position: relative;
    --button-size: 80px
}

.search-form.widget {
    --button-size: 60px
}

.search-form.widget label {
    font-size: 1.3rem;
    top: 10px
}

.search-form.widget input {
    font-size: 1.5rem;
    padding: 30px 20px 15px
}

.search-form p {
    position: relative;
    margin: 0
}

.search-form label {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 1.4rem;
    color: var(--card-text-color-tertiary)
}

.search-form input {
    padding: 40px 20px 20px;
    border-radius: var(--card-border-radius);
    background-color: var(--card-background);
    box-shadow: var(--shadow-l1);
    color: var(--card-text-color-main);
    width: 100%;
    border: 0;
    -webkit-appearance: none;
    transition: box-shadow .3s ease;
    font-size: 1.8rem
}

.search-form input:focus {
    outline: 0;
    box-shadow: var(--shadow-l2)
}

.search-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: var(--button-size);
    cursor: pointer;
    background-color: transparent;
    border: 0;
    padding: 0 10px
}

.search-form button:focus {
    outline: 0
}

.search-form button:focus svg {
    stroke-width: 2;
    color: var(--accent-color)
}

.search-form button svg {
    color: var(--card-text-color-secondary);
    stroke-width: 1.33;
    transition: all .3s ease;
    width: 20px;
    height: 20px
}

a {
    text-decoration: none;
    color: var(--accent-color)
}

a:hover {
    color: var(--accent-color-darker)
}

a.link {
    box-shadow: 0 -2px 0 rgba(var(--link-background-color), var(--link-background-opacity)) inset;
    transition: all .3s ease
}

a.link:hover {
    box-shadow: 0 -10px 0 rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset
}

.section-title {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 10px;
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--body-text-color)
}

.section-title a {
    color: var(--body-text-color)
}


/*Code-Block-Styles*/
.chroma {
    font-family: var(--code-font-family);
    background-color: var(--code-block-bg-color);
    cursor: default;
    color: var(--text-color);
    /*margin: 20px 0;*/
    /*padding: 35px 10px 20px !important;*/
    border-radius: 5px;
}

.chroma::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjYiIGZpbGw9IiNGRjVGNTYiIHN0cm9rZT0iI0UwNDQzRSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkZCRDJFIiBzdHJva2U9IiNERUExMjMiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPgogICAgICAgIDxjaXJjbGUgY3g9IjQ2IiBjeT0iNiIgcj0iNiIgZmlsbD0iIzI3QzkzRiIgc3Ryb2tlPSIjMUFBQjI5IiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT4KICAgIDwvZz4KPC9zdmc+');
    position: absolute;
    left: 15px;
    z-index: 5;
}

/*.chroma:hover::before {*/
/*    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8Y2lyY2xlIGlkPSJzdmdfMiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iI0UwNDQzRSIgZmlsbD0iI0ZGNUY1NiIgcj0iNiIgY3k9IjciIGN4PSI2LjgwNzY5MyIvPgogICAgPGNpcmNsZSBpZD0ic3ZnXzMiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2U9IiNERUExMjMiIGZpbGw9IiNGRkJEMkUiIHI9IjYiIGN5PSI3IiBjeD0iMjYuODA3NjkzIi8+CiAgICA8Y2lyY2xlIGlkPSJzdmdfNCIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iIzFBQUIyOSIgZmlsbD0iIzI3QzkzRiIgcj0iNiIgY3k9IjciIGN4PSI0Ni44MDc2OTMiLz4KICAgIDxsaW5lIHRyYW5zZm9ybT0icm90YXRlKDQ1IDYuNzM4NTUxNjE2NjY4NzA2LDcuMDg3MTQwNTYwMTUwMTQ2KSAiIHN0cm9rZT0iIzU1NSIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiCiAgICAgICAgICBzdHJva2UtbGluZWpvaW49Im51bGwiIGlkPSJzdmdfMTMiIHkyPSI3LjA4NzE0MSIgeDI9IjExLjU3MzIyMiIgeTE9IjcuMDg3MTQxIiB4MT0iMS45MDM4ODIiCiAgICAgICAgICBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBmaWxsPSJub25lIi8+CiAgICA8bGluZSB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgNi43Mzg1NTE2MTY2Njg3MDIsNy4wODcxNDA1NjAxNTAxNDYpICIgc3Ryb2tlPSIjNTU1IiBzdHJva2UtbGluZWNhcD0ibnVsbCIKICAgICAgICAgIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgaWQ9InN2Z18xNSIgeTI9IjcuMDg3MTQxIiB4Mj0iMTEuNTczMjIyIiB5MT0iNy4wODcxNDEiIHgxPSIxLjkwMzg4MiIKICAgICAgICAgIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIGZpbGw9Im5vbmUiLz4KICAgIDxsaW5lIHN0cm9rZT0iIzU1NSIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgaWQ9InN2Z18xNiIgeTI9IjcuMDg3MTQxIiB4Mj0iMzEuNzY1NTAzIgogICAgICAgICAgeTE9IjcuMDg3MTQxIiB4MT0iMjIuMDk2MTYyIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCA0NS42Nzc3Njg3MDcyNzUzOSw2LjMwMTg5ODQ3OTQ2MTY3NCkgIiBpZD0ic3ZnXzE4IgogICAgICAgICAgZD0ibTQ1LjI5MzE1MSw2LjY4NjUxNGwwLC0wLjc2OTIzMWwwLjc2OTIzMSwwLjc2OTIzMWwtMC43NjkyMzEsMHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiCiAgICAgICAgICBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzU1NSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDQ3Ljk4NTQ1ODM3NDAyMzQ0NSw4LjgwMTg5ODAwMjYyNDUxKSAiIGlkPSJzdmdfMTkiCiAgICAgICAgICBkPSJtNDcuNjAwODQyLDkuMTg2NTE0bDAsLTAuNzY5MjNsMC43NjkyMywwLjc2OTIzbC0wLjc2OTIzLDB6IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIgogICAgICAgICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1NTUiIGZpbGw9Im5vbmUiLz4KPC9zdmc+");*/
/*    position: absolute;*/
/*    top: 10px;*/
/*    left: 15px;*/
/*    z-index: 5;*/
/*}*/

.chroma:hover::after {
    content: attr(lang);
    color: var(--text-color);
    font-size: .8rem;
    font-style: italic;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 5;
}

pre.chroma::before {
    content: none;
}



.chroma .cm-s-inner {
    cursor: text;
}
table.lntable::after {
    content: none !important;
}