@charset "UTF-8";
@font-face { font-family: 'Roboto Slab', serif; src: url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;700&display=swap"); }
.hljs ::selection, .hljs::selection { background-color: #214283 !important; color: unset !important; }

.hljs-ln .mark-line { background-color: #484848; border-width: 1px 0 1px 0; border-style: solid; }

@use "sass:selector";
@font-face { font-family: "Poppins-fallback"; size-adjust: 112.50%; ascent-override: 110%; src: local("Arial"); }
@font-face { font-family: "Roboto Slab-fallback"; size-adjust: 117.86999999999993%; ascent-override: 83%; src: local("Times New Roman"); }
@font-face { font-family: "JetBrains Mono-fallback"; size-adjust: 105%; ascent-override: 89%; descent-override: 36%; line-gap-override: normal; src: local("Courier New"); }
:root { --th-background-1: #212121; --th-background-2: #484848; --th-error: #CF6679; --th-background: #121212; --th-on-surface: #eee; --th-on-surface-dim: #eee5; --th-on-P: #111; --th-on-S: #eee; --th-on-background: #777f; --th-on-background-half: #7777; --th-on-background-quarter: #7773; --th-P-border: #5b480e; --th-P-dark: #c79100; --th-P-normal: #ffc107; --th-P-light: #fff350; --th-S-normal: #00658c; --th-S-light: #4b93bc; --th-S-dark: #003b5e; --th-scrollbar-bg: #fff4; --th-scrollbar-fg: var(--th-P-dark); --th-scrollbar-fg-active: var(--th-P-normal); --th-code-inline-fg: #a9b7c6; --th-code-inline-bg: #2b2b2b; --th-code-line-highlight: #fff2; }

* { box-sizing: border-box; scroll-behavior: smooth; }

html { padding-left: calc(100vw - 100%); }

body { margin: 0; padding: 1rem 0 0; width: 100vw; min-width: min-content; max-width: 100%; min-height: 100vh; height: min-content; display: grid; row-gap: 2em; grid-template: ". header ." ". nav ." ". main ." 1fr ". footer ."/1fr MIN(700px, calc(100vw - 16px)) 1fr; position: relative; scroll-behavior: smooth; color: var(--th-on-surface); font-family: 'Poppins', 'Poppins-fallback', sans-serif; background: radial-gradient(var(--th-on-background) 0.5px, transparent 1px), var(--th-background); background-position: left top; background-size: 17px 17px; }
:is(.wf-inactive, .wf-loading) body { font-family: 'Poppins-fallback', sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', 'Roboto Slab-fallback', serif; }
:is(.wf-inactive, .wf-loading) h1, :is(.wf-inactive, .wf-loading) h2, :is(.wf-inactive, .wf-loading) h3, :is(.wf-inactive, .wf-loading) h4, :is(.wf-inactive, .wf-loading) h5, :is(.wf-inactive, .wf-loading) h6 { font-family: 'Roboto Slab-fallback', serif; }

h1 { font-size: 28pt; }

a { text-decoration: none; color: var(--th-P-normal); }
a:hover, a:active { color: var(--th-P-light); transition: all 0.1s; }

img { max-width: 100%; }

header { grid-area: header; }
header a { display: block; padding: 1rem; font-family: 'Roboto Slab', 'Roboto Slab-fallback', serif; text-align: center; font-size: 1.5em; font-weight: bold; background-color: white; color: black; mix-blend-mode: screen; border-radius: 50vmin; }
:is(.wf-inactive, .wf-loading) header a { font-family: 'Roboto Slab-fallback', serif; }
header a svg { height: 1.5em; width: 100%; display: block; }
header a svg #mouth { animation-duration: .3s; animation-iteration-count: 1; }
header a:hover { color: black; transition: none; }
header a:hover svg #mouth { animation-name: mouth-bounce; animation-timing-function: ease; }

@keyframes mouth-bounce { 0% { transform: translateY(0px); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0px); } }
nav { grid-area: nav; position: sticky; top: 0; }
nav ul { display: flex; flex-direction: row; align-items: stretch; width: 100%; padding: 0; margin: 0; list-style: none; }
nav ul li a { display: block; padding: .1em 1em; transition: all .2s ease-out; border-radius: 9999px; font-weight: 900; color: white; text-transform: uppercase; }
nav ul li a:hover { opacity: 100%; color: var(--th-background); background-color: var(--th-P-normal); }

#toolbox { grid-area: toolbox; }

main { grid-area: main; display: flex; flex-direction: column; gap: 4rem; }

footer { grid-area: footer; }
footer .giscus { margin-top: 4em; padding: 1em; backdrop-filter: blur(2px); box-shadow: 0 0 10px black; border-radius: 2px; outline: 1px solid var(--th-P-border); outline-color: var(--th-S-dark); }
footer #copyright { font-size: small; text-align: center; color: var(--th-on-background-half); margin-top: 10rem; display: block; background-color: var(--th-background); }

.post-card article { padding: 1em; backdrop-filter: blur(2px); box-shadow: 0 0 10px black; border-radius: 2px; outline: 1px solid var(--th-P-border); }
.post-card .meta { margin: 0 0 .5em 0; position: relative; display: flex; align-items: baseline; justify-content: end; text-align: right; font-family: 'Roboto Slab', 'Roboto Slab-fallback', serif; font-size: 0.83em; font-weight: bold; min-height: 1.8em; }
:is(.wf-inactive, .wf-loading) .post-card .meta { font-family: 'Roboto Slab-fallback', serif; }
.post-card .meta .tags { display: flex; flex-direction: row; }
.post-card .meta .tags .tag { margin: 0 .2em; border: 1px solid var(--th-P-dark); border-radius: 2px; padding: 1px 6px; min-width: 2em; text-align: center; }
.post-card .meta time { padding-left: 2em; }
.post-card .meta time.lastmod { text-decoration: underline dotted; }
.post-card .meta time.created { position: absolute; right: 0; top: -100%; }
.post-card .meta time.lastmod:hover ~ .created, .post-card .meta time.lastmod ~ .created:hover { opacity: 1; visibility: visible; }
.post-card .meta time.lastmod ~ .created { opacity: 0; visibility: hidden; transition: all .5s 0.1s; }
.post-card .title { margin-top: 0; }
.post-card .preview { max-height: 300px; display: block; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(white 200px 220px, transparent 300px); mask-image: linear-gradient(white 250px 220px, transparent 300px); }
.post-card .preview :first-child { margin-top: 0; }
.post-card .read-more { margin-top: 1em; padding-block: .5em; display: block; text-align: end; }

li { margin-block: 0.3em; }

blockquote { border-left: 6px solid var(--th-on-background-half); margin: auto 0; padding-left: 1em; background-color: var(--th-on-background-quarter); }
blockquote[by] { display: flow-root; margin: 1em 0; }
blockquote[by]:after { content: "— " attr(by); display: block; padding-right: 1em; opacity: 50%; text-align: right; font-style: italic; }

.footnote, .reversefootnote { font-family: 'JetBrains Mono', 'JetBrains Mono-fallback', monospace; }
:is(.wf-inactive, .wf-loading) .footnote, :is(.wf-inactive, .wf-loading) .reversefootnote { font-family: 'JetBrains Mono-fallback', monospace; }
.footnote:before, .reversefootnote:before { content: "["; }
.footnote:after, .reversefootnote:after { content: "]"; }

.footnotes { color: var(--th-on-surface-dim); font-size: 12pt; }

pre, code, samp, var, kbd { font-family: 'JetBrains Mono', 'JetBrains Mono-fallback', monospace; }
:is(.wf-inactive, .wf-loading) pre, :is(.wf-inactive, .wf-loading) code, :is(.wf-inactive, .wf-loading) samp, :is(.wf-inactive, .wf-loading) var, :is(.wf-inactive, .wf-loading) kbd { font-family: 'JetBrains Mono-fallback', monospace; }

pre code.hljs { padding: 1rem; }

.line-wrap { white-space: pre-wrap; }
.line-wrap .hljs-ln-numbers { vertical-align: baseline; }

pre:not(:has(.hljs)) { overflow: auto; background-color: #2b2b2b; }
pre:not(:has(.hljs)) code { display: block; padding: 1rem; }

.code-wrapper { margin: 1em 0; display: flex; flex-direction: column; align-items: center; }
.code-wrapper pre { margin: 0; min-height: 3.8em; min-width: 100%; width: 100%; max-width: 95vw; resize: both; overflow-x: auto; overflow-y: clip; display: flex; flex-direction: column; }
.code-wrapper pre code { height: 100%; }
.code-wrapper pre.fit-code { width: min-content; height: min-content; }

.hljs-ln-numbers { display: none; }

.lines .hljs-ln { margin-left: -0.7em; }
.lines .hljs-ln-numbers { display: table-cell; min-width: calc(3ch + .3em); padding-right: .3em !important; border-right: 1px solid; text-align: right; color: var(--th-code-line-highlight); }
.lines .hljs-ln-numbers + .hljs-ln-code { padding-left: .5em !important; }

[lines] .hljs .highlight .hljs-ln-numbers { color: var(--th-S-light); }
[lines] .hljs .highlight .hljs-ln-code { background-color: var(--th-code-line-highlight); border-right: 1px solid var(--th-S-light); border-left: 5px solid var(--th-S-light); }
[lines] .hljs .highlight.start .hljs-ln-code { border-top: 1px solid var(--th-S-light); }
[lines] .hljs .highlight.end .hljs-ln-code { border-bottom: 1px solid var(--th-S-light); }

pre { position: relative; }
pre[filename]:before { content: attr(filename); background-color: var(--th-P-dark); display: block; color: var(--th-on-P); padding-left: 0.5em; }

:not(pre) > code, kbd, var, samp, pre:has(code) { border: 1px solid var(--th-P-border); border-radius: 3px; }

:not(pre) > code, kbd { padding: 0px .5rem; margin: 4px; color: var(--th-code-inline-fg); background-color: var(--th-code-inline-bg); white-space: nowrap; }
@media (max-width: 400) { :not(pre) > code, kbd { white-space: pre-wrap; } }

kbd { box-shadow: 1px 2px 0 1px var(--th-P-border-semitrans); border-radius: 6px; font-weight: bold; filter: invert(100%) drop-shadow(1px 3px 0px slategray); }

details { padding: .5rem; border: 1px solid var(--th-S-dark); }
details summary { color: var(--th-S-normal); }
details[open] summary { margin-bottom: 1rem; }

::-webkit-scrollbar { height: 6px; width: 6px; background-color: var(--th-scrollbar-bg); border-radius: 3px; }

::-webkit-scrollbar-corner { background-color: transparent; }

::-webkit-scrollbar-thumb { background-color: var(--th-scrollbar-fg); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--th-scrollbar-fg-active); }

#shortcuts { display: flex; flex-direction: column; align-items: flex-end; font-size: 2rem; position: fixed; bottom: .5em; right: .7em; backdrop-filter: blur(2px); box-shadow: 0 0 10px black; border-radius: 2px; outline: 1px solid var(--th-P-border); background-color: #0008; }
#shortcuts .help i { position: relative; z-index: 2; transition: all .2s; }
#shortcuts .help i:hover ~ pre { opacity: 1; transform: scale(1); }
#shortcuts .help i:hover { color: var(--th-S-light); }
#shortcuts .help pre { position: absolute; right: 0; bottom: 0; padding: 1em; padding-right: 3em; margin: 0; text-align: left; font-size: 1rem; white-space: pre-line; opacity: 0; min-width: max-content; background-color: var(--th-S-dark); border: 1px solid var(--th-S-normal); transform: scale(0); transform-origin: bottom right; transition: all .2s; }

#advent { grid-column-start: main-start; grid-column-end: main-end; }
#advent h1 { font-family: 'Source Code Pro', monospace; color: #00cc00; text-shadow: 0 0 2px #00cc00, 0 0 5px #00cc00; text-align: center; }
#advent h1:hover { color: #99ff99; text-shadow: 0 0 2px #99ff99, 0 0 5px #99ff99; }
#advent h1:hover .stars { color: #ffffee; text-shadow: 0 0 5px #ffffee; }
#advent h1 .stars { color: #ffff66; text-shadow: 0 0 5px #ffff66; }

@media (max-width: 578px) { .stars { display: block; } }
@media (min-width: 922px) { #advent { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; }
  #advent h1 { display: inline-block; position: sticky; top: 1em; margin-top: 1em; text-align: initial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } }