Stack/style.css

/*!* Hugo Theme Stack
*
* @author: Jimmy Cai
* @website: https://jimmycai.com
* @link: https://github.com/CaiJimmy/hugo-theme-stack*/
:root {
  --main-top-padding: 35px;
  --body-background: #f5f5fa;
  --accent-color: #34495e;
  --accent-color-darker: #2c3e50;
  --accent-color-text: #fff;
  --body-text-color: #707070;
  --tag-border-radius: 4px;
  --section-separation: 40px;
  --scrollbar-thumb: hsl(0, 0%, 85%);
  --scrollbar-track: var(--body-background)
}

@media(min-width:1280px) {
  :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);
  --scrollbar-thumb: hsl(0, 0%, 40%);
  --scrollbar-track: var(--body-background)
}

: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", var(--zh-font-family), monospace
}

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

@media(min-width:768px) {
  :root {
    --card-padding: 25px
  }
}

@media(min-width:1280px) {
  :root {
    --card-padding: 30px
  }
}

@media(min-width:768px) {
  :root {
    --small-card-padding: 25px
  }
}

: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.6rem;
  --article-line-height: 1.85
}

@media(min-width:768px) {
  :root {
    --article-font-size: 1.7rem
  }
}

: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;
  --kbd-border-color: #dadada
}

: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)
}

[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: 100%;
  display: block
}

[data-scheme=light] .chroma .lntable>tbody {
  display: block;
  width: 100%
}

[data-scheme=light] .chroma .lntable>tbody>tr {
  display: flex;
  width: 100%
}

[data-scheme=light] .chroma .lntable>tbody>tr>td:last-child {
  overflow-x: auto
}

[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;
  display: block
}

[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: #ae81ff
}

[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 .gd {
  color: #f92672
}

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

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

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

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

[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: 100%;
  display: block
}

[data-scheme=dark] .chroma .lntable>tbody {
  display: block;
  width: 100%
}

[data-scheme=dark] .chroma .lntable>tbody>tr {
  display: flex;
  width: 100%
}

[data-scheme=dark] .chroma .lntable>tbody>tr>td:last-child {
  overflow-x: auto
}

[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;
  display: block
}

[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 .n {
  color: #f8f8f2
}

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

[data-scheme=dark] .chroma .nb {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .bp {
  color: #f8f8f2
}

[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 .ni {
  color: #f8f8f2
}

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

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

[data-scheme=dark] .chroma .fm {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .nl {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .nn {
  color: #f8f8f2
}

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

[data-scheme=dark] .chroma .py {
  color: #f8f8f2
}

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

[data-scheme=dark] .chroma .nv {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .vc {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .vg {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .vi {
  color: #f8f8f2
}

[data-scheme=dark] .chroma .vm {
  color: #f8f8f2
}

[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 .p {
  color: #f8f8f2
}

[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 {
  --menu-icon-separation: 40px;
  --container-padding: 15px;
  --widget-separation: var(--section-separation)
}

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

.container .left-sidebar {
  order: -3;
  max-width: var(--left-sidebar-max-width)
}

.container .right-sidebar {
  order: -1;
  max-width: var(--right-sidebar-max-width)
}

@media(min-width:1024px) {
  .container .right-sidebar {
    display: flex
  }
}

@media(min-width:768px) {
  .container.extended {
    max-width: 1024px;
    --left-sidebar-max-width: 25%;
    --right-sidebar-max-width: 30%
  }
}

@media(min-width:1024px) {
  .container.extended {
    max-width: 1280px;
    --left-sidebar-max-width: 20%;
    --right-sidebar-max-width: 30%
  }
}

@media(min-width:1280px) {
  .container.extended {
    max-width: 1536px;
    --left-sidebar-max-width: 15%;
    --right-sidebar-max-width: 25%
  }
}

@media(min-width:768px) {
  .container.compact {
    --left-sidebar-max-width: 25%;
    max-width: 768px
  }
}

@media(min-width:1024px) {
  .container.compact {
    max-width: 1024px;
    --left-sidebar-max-width: 20%
  }
}

@media(min-width:1280px) {
  .container.compact {
    max-width: 1280px
  }
}

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

.flex.column {
  flex-direction: column
}

.flex.on-phone--column {
  flex-direction: column
}

@media(min-width:768px) {
  .flex.on-phone--column {
    flex-direction: unset
  }
}

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

main.main {
  order: -2;
  min-width: 0;
  max-width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--section-separation)
}

@media(min-width:768px) {
  main.main {
    padding-top: var(--main-top-padding)
  }
}

.main-container {
  min-height: 100vh;
  align-items: flex-start;
  padding: 0 15px;
  gap: var(--section-separation);
  padding-top: var(--main-top-padding)
}

@media(min-width:768px) {
  .main-container {
    padding: 0 20px
  }
}

/*!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
}

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

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

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-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::before,
.hamburger.is-active .hamburger-inner::after {
  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::before,
.hamburger-inner::after {
  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::before,
.hamburger-inner::after {
  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: 0;
  top: 0;
  z-index: 2;
  cursor: pointer;
  outline: none
}

[dir=rtl] #toggle-menu {
  left: 0;
  right: auto
}

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

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

#main-menu {
  list-style: none;
  overflow-y: auto;
  flex-grow: 1;
  font-size: 1.4rem;
  background-color: var(--card-background);
  box-shadow: var(--shadow-l1);
  display: none;
  margin: 0 calc(var(--container-padding) * -1);
  padding: 30px
}

@media(min-width:1280px) {
  #main-menu {
    padding: 15px 0
  }
}

#main-menu,
#main-menu .menu-bottom-section ol {
  flex-direction: column;
  gap: 30px
}

@media(min-width:1280px) {

  #main-menu,
  #main-menu .menu-bottom-section ol {
    gap: 25px
  }
}

#main-menu.show {
  display: flex
}

@media(min-width:768px) {
  #main-menu {
    align-items: flex-end;
    display: flex;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    margin: 0
  }
}

#main-menu li {
  position: relative;
  vertical-align: middle;
  padding: 0
}

@media(min-width:768px) {
  #main-menu li {
    width: 100%
  }
}

#main-menu li svg {
  stroke: currentColor;
  stroke-width: 1.33;
  width: 20px;
  height: 20px
}

#main-menu li a {
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: var(--body-text-color);
  gap: var(--menu-icon-separation)
}

#main-menu li span {
  flex: 1
}

#main-menu li.current a {
  color: var(--accent-color);
  font-weight: 700
}

#main-menu li.menu-bottom-section {
  margin-top: auto
}

#main-menu li.menu-bottom-section ol {
  display: flex;
  padding-left: 0
}

.menu-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 10px
}

.menu-social svg {
  width: 24px;
  height: 24px;
  stroke: var(--body-text-color);
  stroke-width: 1.33
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--section-separation)
}

.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 .article-image img {
  width: 100%;
  height: 150px;
  object-fit: cover
}

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

@media(min-width:1280px) {
  .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);
  gap: 15px
}

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

@media(min-width:1280px) {
  .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-subtitle {
  font-weight: 400;
  color: var(--card-text-color-secondary);
  line-height: 1.5;
  margin: 0;
  font-size: 1.75rem
}

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

.article-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.article-time,
.article-translations {
  display: flex;
  color: var(--card-text-color-tertiary);
  gap: 15px
}

.article-time svg,
.article-translations svg {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  stroke-width: 1.33;
  flex-shrink: 0
}

.article-time time,
.article-time a,
.article-translations time,
.article-translations a {
  font-size: 1.4rem;
  color: var(--card-text-color-tertiary)
}

.article-time>div,
.article-translations>div {
  display: inline-flex;
  align-items: center;
  gap: 15px
}

.article-time {
  flex-wrap: wrap
}

.article-translations>div {
  flex-wrap: wrap
}

.article-category,
.article-tags {
  display: flex;
  gap: 10px
}

.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;
  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: 50px
}

@media(min-width:768px) {
  .article-list--compact {
    --image-size: 60px
  }
}

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

.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;
  min-height: var(--image-size);
  gap: 10px
}

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

@media(min-width:768px) {
  .article-list--compact article .article-title {
    font-size: 1.8rem
  }
}

.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: 15px
}

@media(min-width:640px) {
  .article-list--tile article .article-details {
    padding: 20px
  }
}

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

@media(min-width:640px) {
  .article-list--tile article .article-title {
    font-size: 2.2rem
  }
}

.widget {
  display: flex;
  flex-direction: column
}

.widget .widget-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
  color: var(--body-text-color)
}

.tagCloud .tagCloud-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.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);
  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
}

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
}

.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)
}

.hidden {
  display: none !important;
}


section nav a {
  padding: 16px 32px;
  display: inline-flex;
  color: var(--card-text-color-secondary)
}

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

.left-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  gap: var(--sidebar-element-separation);
  max-width: none;
  width: 100%;
  position: relative;
  --sidebar-avatar-size: 100px;
  --sidebar-element-separation: 20px;
  --emoji-size: 40px;
  --emoji-font-size: 20px
}

@media(min-width:768px) {
  .left-sidebar {
    width: auto;
    padding-top: var(--main-top-padding);
    padding-bottom: var(--main-top-padding);
    max-height: 100vh
  }
}

@media(min-width:1536px) {
  .left-sidebar {
    --sidebar-avatar-size: 120px;
    --sidebar-element-separation: 25px;
    --emoji-size: 40px
  }
}

.left-sidebar.sticky {
  top: 0
}

.left-sidebar.compact {
  --sidebar-avatar-size: 80px;
  --emoji-size: 30px;
  --emoji-font-size: 15px
}

@media(min-width:1024px) {
  .left-sidebar.compact header {
    flex-direction: row
  }
}

.left-sidebar.compact header .site-meta {
  gap: 5px
}

.left-sidebar.compact header .site-name {
  font-size: 1.4rem
}

@media(min-width:1536px) {
  .left-sidebar.compact header .site-name {
    font-size: 1.75rem
  }
}

.left-sidebar.compact header .site-description {
  font-size: 1.4rem
}

.right-sidebar {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: var(--widget-separation)
}

.right-sidebar.sticky {
  top: 0
}

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

.sidebar header {
  z-index: 1;
  transition: box-shadow .5s ease;
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-element-separation)
}

@media(min-width:768px) {
  .sidebar header {
    padding: 0
  }
}

.sidebar header .site-avatar {
  position: relative;
  margin: 0;
  width: var(--sidebar-avatar-size);
  height: var(--sidebar-avatar-size);
  flex-shrink: 0
}

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

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

.sidebar header .site-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center
}

.sidebar header .site-name {
  color: var(--accent-color);
  margin: 0;
  font-size: 1.6rem
}

@media(min-width:1536px) {
  .sidebar header .site-name {
    font-size: 1.8rem
  }
}

.sidebar header .site-description {
  color: var(--body-text-color);
  font-weight: 400;
  margin: 0;
  font-size: 1.4rem
}

@media(min-width:1536px) {
  .sidebar header .site-description {
    font-size: 1.6rem
  }
}

[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;
  gap: var(--menu-icon-separation)
}

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

#i18n-switch {
  color: var(--body-text-color);
  display: inline-flex;
  align-content: center;
  gap: var(--menu-icon-separation)
}

#i18n-switch select {
  border: 0;
  background-color: transparent;
  color: var(--body-text-color)
}

#i18n-switch select option {
  color: var(--card-text-color-main);
  background-color: var(--card-background)
}

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
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb)transparent
}

::-webkit-scrollbar {
  height: auto
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb)
}

::-webkit-scrollbar-track {
  background-color: transparent
}

.article-page.hide-sidebar-sm .left-sidebar {
  display: none
}

@media(min-width:768px) {
  .article-page.hide-sidebar-sm .left-sidebar {
    display: inherit
  }
}

.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 .article-header .article-image img {
  height: auto;
  width: 100%;
  max-height: 50vh;
  object-fit: cover
}

.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 .footnotes {
  font-family: var(--base-font-family)
}

.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;
  gap: 15px
}

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

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

.article-page .main-article .article-footer .article-copyright a,
.article-page .main-article .article-footer .article-lastmod a {
  color: var(--body-text-color)
}

.article-page .main-article .article-footer .article-copyright a.link,
.article-page .main-article .article-footer .article-lastmod a.link {
  box-shadow: unset
}

.widget--toc {
  background-color: var(--card-background);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-l1);
  display: flex;
  flex-direction: column;
  color: var(--card-text-color-main);
  overflow: hidden
}

.widget--toc ::-webkit-scrollbar-thumb {
  background-color: var(--card-separator-color)
}

.widget--toc #TableOfContents {
  overflow-x: auto;
  max-height: 75vh
}

.widget--toc #TableOfContents ol,
.widget--toc #TableOfContents ul {
  margin: 0;
  padding: 0
}

.widget--toc #TableOfContents ol {
  list-style-type: none;
  counter-reset: item
}

.widget--toc #TableOfContents ol li a:first-of-type::before {
  counter-increment: item;
  content: counters(item, ".")". ";
  font-weight: 700;
  margin-right: 5px
}

.widget--toc #TableOfContents>ul {
  padding: 0 1em
}

.widget--toc #TableOfContents li {
  margin: 15px 0 15px 20px;
  padding: 5px
}

.widget--toc #TableOfContents li>ol,
.widget--toc #TableOfContents li>ul {
  margin-top: 10px;
  padding-left: 10px;
  margin-bottom: -5px
}

.widget--toc #TableOfContents li>ol>li:last-child,
.widget--toc #TableOfContents li>ul>li:last-child {
  margin-bottom: 0
}

.widget--toc #TableOfContents li.active-class>a {
  border-left: var(--heading-border-size)solid var(--accent-color);
  font-weight: 700
}

.widget--toc #TableOfContents ul li.active-class>a {
  display: block
}

.widget--toc #TableOfContents>ul>li.active-class>a {
  margin-left: calc(-25px - 1em);
  padding-left: calc(25px + 1em - var(--heading-border-size))
}

.widget--toc #TableOfContents>ol>li.active-class>a {
  margin-left: calc(-9px - 1em);
  padding-left: calc(9px + 1em - var(--heading-border-size));
  display: block
}

.widget--toc #TableOfContents>ul>li>ul>li.active-class>a {
  margin-left: calc(-60px - 1em);
  padding-left: calc(60px + 1em - var(--heading-border-size))
}

.widget--toc #TableOfContents>ol>li>ol>li.active-class>a {
  margin-left: calc(-44px - 1em);
  padding-left: calc(44px + 1em - var(--heading-border-size));
  display: block
}

.widget--toc #TableOfContents>ul>li>ul>li>ul>li.active-class>a {
  margin-left: calc(-95px - 1em);
  padding-left: calc(95px + 1em - var(--heading-border-size))
}

.widget--toc #TableOfContents>ol>li>ol>li>ol>li.active-class>a {
  margin-left: calc(-79px - 1em);
  padding-left: calc(79px + 1em - var(--heading-border-size));
  display: block
}

.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li.active-class>a {
  margin-left: calc(-130px - 1em);
  padding-left: calc(130px + 1em - var(--heading-border-size))
}

.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li.active-class>a {
  margin-left: calc(-114px - 1em);
  padding-left: calc(114px + 1em - var(--heading-border-size));
  display: block
}

.widget--toc #TableOfContents>ul>li>ul>li>ul>li>ul>li>ul>li.active-class>a {
  margin-left: calc(-165px - 1em);
  padding-left: calc(165px + 1em - var(--heading-border-size))
}

.widget--toc #TableOfContents>ol>li>ol>li>ol>li>ol>li>ol>li.active-class>a {
  margin-left: calc(-149px - 1em);
  padding-left: calc(149px + 1em - var(--heading-border-size));
  display: block
}

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

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

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

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

.related-content 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 0
}

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

.article-content h1 a.header-anchor,
.article-content h2 a.header-anchor,
.article-content h3 a.header-anchor,
.article-content h4 a.header-anchor,
.article-content h5 a.header-anchor,
.article-content h6 a.header-anchor {
  transition: opacity .3s ease;
  opacity: 0;
  position: absolute;
  left: 0;
  width: var(--card-padding);
  text-align: center;
  color: var(--accent-color)
}

.article-content h1 a.header-anchor:before,
.article-content h2 a.header-anchor:before,
.article-content h3 a.header-anchor:before,
.article-content h4 a.header-anchor:before,
.article-content h5 a.header-anchor:before,
.article-content h6 a.header-anchor:before {
  content: "#"
}

.article-content h1:hover a.header-anchor,
.article-content h1:focus a.header-anchor,
.article-content h2:hover a.header-anchor,
.article-content h2:focus a.header-anchor,
.article-content h3:hover a.header-anchor,
.article-content h3:focus a.header-anchor,
.article-content h4:hover a.header-anchor,
.article-content h4:focus a.header-anchor,
.article-content h5:hover a.header-anchor,
.article-content h5:focus a.header-anchor,
.article-content h6:hover a.header-anchor,
.article-content h6:focus a.header-anchor {
  opacity: 1
}

.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-inline-start: var(--blockquote-border-size)solid var(--card-separator-color);
  padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
  background-color: var(--blockquote-background-color)
}

.article-content blockquote .cite {
  display: block;
  text-align: right;
  font-size: .75em
}

.article-content blockquote .cite a {
  text-decoration: underline
}

.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 a,
.article-content code {
  word-break: break-word
}

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

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

.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)
}

[dir=rtl] .article-content pre {
  direction: ltr
}

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

.article-content .highlight {
  background-color: var(--pre-background-color);
  padding: var(--card-padding);
  position: relative
}

.article-content .highlight:hover .copyCodeButton {
  opacity: 1
}

[dir=rtl] .article-content .highlight {
  direction: ltr
}

.article-content .highlight pre {
  margin: initial;
  padding: 0;
  margin: 0;
  width: auto
}

.article-content .copyCodeButton {
  position: absolute;
  top: calc(var(--card-padding));
  right: calc(var(--card-padding));
  background: var(--card-background);
  border: none;
  box-shadow: var(--shadow-l2);
  border-radius: var(--tag-border-radius);
  padding: 8px 16px;
  color: var(--card-text-color-main);
  cursor: pointer;
  font-size: 14px;
  opacity: 0;
  transition: opacity .3s ease
}

.article-content .table-wrapper {
  padding: 0 var(--card-padding);
  overflow-x: auto;
  display: block
}

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

.article-content th,
.article-content td {
  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,
.article-content .video-wrapper>video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 0
}

.article-content .gitlab-embed-snippets {
  margin: 0 !important
}

.article-content .gitlab-embed-snippets .file-holder.snippet-file-content {
  margin-block-end: 0 !important;
  margin-block-start: 0 !important;
  margin-left: calc((var(--card-padding)) * -1) !important;
  margin-right: calc((var(--card-padding)) * -1) !important;
  padding: 0 var(--card-padding) !important
}

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

.article-content .katex-display>.katex {
  overflow-x: auto;
  overflow-y: hidden
}

.article-content kbd {
  border: 1px solid var(--kbd-border-color);
  font-weight: 700;
  font-size: .9em;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-block
}

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

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

.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;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.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 {
  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 {
  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;
  inset-inline-start: 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;
  inset-inline-end: 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 rgba(var(--link-background-color), var(--link-background-opacity))inset;
  transition: all .3s ease
}

a.link:hover {
  box-shadow: 0 calc(-1rem * var(--article-line-height))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)
}