main.css

*,*::before,*::after{box-sizing:border-box}body{min-height:100%;font-family:var(--main-font);background-color:var(--bg-color);color:var(--text-color)}html{scroll-behavior:smooth}button:focus-visible,a:focus-visible{outline:var(--primary-color) solid 3px}::selection{background-color:var(--primary-color);color:var(--bg-color)}@media screen and (min-width: 425px){body::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background:rgba(174,183,202,.631372549);border-radius:0px}::-webkit-scrollbar-thumb:hover{background:rgba(138,144,161,.631372549)}}.prose h1{font-size:1.5em;font-weight:bolder;margin:1em 0 .5em 0}.prose h2{font-size:1.3em;padding-top:65px;margin-top:-45px}.prose h3{font-size:1.1em;padding-top:65px;margin-top:-45px}.prose h4{font-size:1.05em;margin:30px 0 15px 0}.prose .zola-anchor{visibility:hidden;margin-left:.75em;font-size:.85em}.prose h1:hover a.zola-anchor,.prose h2:hover a.zola-anchor,.prose h3:hover a.zola-anchor,.prose h4:hover a.zola-anchor,.prose h5:hover a.zola-anchor,.prose h6:hover a.zola-anchor{visibility:visible}.prose p{font-size:1em;line-height:inherit;word-wrap:break-word}.prose a{color:var(--primary-color);text-decoration-color:var(--primary-pale-color);text-decoration-thickness:1.5px}.prose a:hover{text-decoration-color:var(--primary-color)}@media (max-width: 425px){.prose a{text-decoration-color:unset;text-decoration-thickness:auto}}.prose img{max-width:100%;display:block;margin:0 auto;border-radius:var(--img-border-radius)}.prose figure{margin:0 auto}.prose figcaption{width:100%;text-align:center;margin:5px auto}.prose blockquote{border-left:3px var(--primary-pale-color) solid;padding-left:16px;margin:0 0 24px 0;color:var(--text-pale-color)}.prose li::marker{color:var(--primary-color)}.prose hr{border:none;background-color:var(--primary-pale-color);height:3px;margin:36px 0}.prose table{width:100%;border-spacing:0;border:1px solid var(--primary-pale-color)}.prose thead{background-color:var(--primary-pale-color)}.prose th,.prose td{line-height:2;text-align:center;border:1px solid var(--primary-pale-color);padding:1px 10px}.prose p>code,.prose li>code,.prose td>code,.prose th>code{font-family:var(--code-font);font-size:.8em;padding:1px 6px;margin:0 2px;color:var(--primary-color);background-color:var(--primary-pale-color);border-radius:var(--inline-code-border-radius)}.prose pre{font-size:.8em;margin:1.25em 0;padding:12px 48px 12px 16px;line-height:1.5;border:1.5px solid var(--primary-color);overflow:auto}.prose pre code{font-family:var(--code-font)}.prose pre[data-linenos]{padding:12px 48px 12px 8px}.prose pre table{width:100%;border-collapse:collapse;border:none}.prose pre table th,.prose pre table td{line-height:1.5}.prose pre table tr td:first-of-type{color:var(--text-pale-color)}.prose pre table td{padding:0;padding-right:48px;text-align:initial;border:initial}.prose pre table td:nth-of-type(1){text-align:right;user-select:none;padding-right:1em}.prose pre table td:nth-of-type(1) mark::before{left:-8px;width:calc(100% + 1em + 8px)}.prose pre mark{display:block;color:inherit;background-color:rgba(0,0,0,0);position:relative;overflow:visible}.prose pre mark::before{pointer-events:none;content:"";position:absolute;top:0;bottom:0;width:calc(100% + 48px + 48px);background-color:var(--highlight-mark-color)}.prose pre.mermaid{border:none}.prose pre>code>mark::before{width:calc(100% + 48px + 16px);left:-16px}.prose .codeblock{margin:1em 0;position:relative;overflow:auto}.prose .codeblock pre{margin:0}.prose .codeblock .copy{z-index:9;position:absolute;right:.6em;top:.6em;width:24px;height:24px;padding:2px;cursor:pointer;background:rgba(0,0,0,0);border:none;color:var(--text-pale-color)}.prose .codeblock .copy.copied,.prose .codeblock .copy:hover{color:var(--primary-color)}.prose .codeblock .copy svg{width:20px;height:20px}.prose .codeblock-with-filename{margin-top:calc(0px - 1.2em - 24px - 1em - 1.5px)}.prose .codeblock-with-filename .filename{z-index:1;position:relative;top:calc(1.2em + 24px + 1em + 1.5px);padding:12px 16px;line-height:1.2;color:var(--text-pale-color);border-bottom:1.5px solid var(--primary-pale-color)}.prose .codeblock-with-filename pre>code{display:inline-block;min-width:100%;margin-top:3.2em}.prose .footnote-definition{display:flex}.prose .footnote-definition .footnote-definition-label{position:static;font-size:1em;line-height:inherit;vertical-align:auto;margin-right:.5em}.prose .footnote-definition .footnote-definition-label::after{content:"."}.prose .footnote-definition p{margin:0}.prose .footnote-definition button.backlink{border:none;background:none;display:flex;align-items:center;margin-left:.5em;color:var(--primary-color);cursor:pointer}.prose .callout{line-height:inherit;margin-bottom:20px;border:1.5px solid var(--primary-color);padding:6px 12px;display:flex;gap:12px}.prose .callout .icon{height:1.75em;display:flex;align-items:center}.prose .callout .content p{margin:0}.prose .callout .content p+p{margin:.2em 0 .5em}.prose .callout.note{color:var(--callout-note-color);border-color:var(--callout-note-color)}.prose .callout.important{color:var(--callout-important-color);border-color:var(--callout-important-color)}.prose .callout.warning{color:var(--callout-warning-color);border-color:var(--callout-warning-color)}.prose .callout.alert{color:var(--callout-alert-color);border-color:var(--callout-alert-color)}.prose .callout.question{color:var(--callout-question-color);border-color:var(--callout-question-color)}.prose .callout.tip{color:var(--callout-tip-color);border-color:var(--callout-tip-color)}.prose .mermaid{background:#fff}body.prose-page main{font-size:var(--paragraph-font-size);min-height:100vh;padding-top:45px;margin:0 auto;max-width:var(--main-max-width);display:flex;flex-direction:column;justify-content:space-between}body.prose-page article{padding:45px 15px 30px;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}body.prose-page .giscus{padding:0 15px}.layout-list .category{font-size:1.3em;margin:2em 15px 1em}.layout-list .post-list{margin-top:25px}.layout-list .post{display:flex;justify-content:space-between;align-items:flex-end;gap:5px;padding:6px 15px;margin:1px 0;border-radius:2px;font-size:1.1em;text-decoration:none;color:var(--primary-color);-webkit-tap-highlight-color:rgba(0,0,0,0)}.layout-list .post:hover{background-color:var(--primary-pale-color)}@media (max-width: 768px){.layout-list .post{font-size:1em;margin:2.5px 5px;padding:5px 10px}}.layout-list .post .date{white-space:nowrap}body.homepage #wrapper{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}body.homepage main{width:100%;max-width:var(--homepage-max-width);padding:3em 0 6em}body.homepage #info{padding:0 15px;display:flex;gap:1em}body.homepage #info img{height:var(--avatar-size);width:var(--avatar-size);border-radius:50%}body.homepage #info #text{font-size:1.25em;display:flex;flex-direction:column;justify-content:space-around}body.homepage #info #name{font-size:1.7em;color:var(--primary-color);}body.homepage #info #id{margin-left:.5em;color:var(--primary-color)}body.homepage #info #bio{font-size:.9em;color:var(--text-color);}body.homepage #links{padding:0 15px;margin:1.25em 0 1.75em;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5em 1em;font-size:1.25em}body.homepage #links a,body.homepage #links button{text-decoration:none;color:var(--text-color)}body.homepage #links a:hover,body.homepage #links button:hover{color:var(--primary-color)}body.homepage #links #left{display:flex;flex-wrap:wrap;gap:1em}body.homepage #links #left a{border-bottom:1.5px solid var(--primary-color);line-height:24px}body.homepage #links #right{display:flex;gap:.5em;margin-left:auto}body.homepage #links #right a,body.homepage #links #right button{width:24px;height:24px}body.homepage #links #right button{padding:0;border:none;background-color:rgba(0,0,0,0);cursor:pointer}@media (max-width: 425px){body.homepage #links #left{gap:.75em}}body.homepage #brief{padding:0 15px;font-size:1.15em;line-height:1.5}header{z-index:99;position:fixed;top:0;width:100%;height:45px;background-color:var(--bg-color);border-bottom:1.5px solid var(--primary-color)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){header.blur{background-color:initial;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}header #header-wrapper{height:100%;max-width:var(--main-max-width);margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;position:relative}header nav{font-size:1.4em;display:flex;align-items:center}header nav a{color:var(--text-color);text-decoration:none}header nav a:hover{color:var(--primary-color)}header nav .separator{width:24px;text-align:center;line-height:1;cursor:pointer;border:none;padding:0;background:rgba(0,0,0,0);margin:0 .1em;color:var(--text-color);-webkit-tap-highlight-color:rgba(0,0,0,0)}header nav .wrap.left{margin:0 .3em 0 -.1em}header nav .wrap.right{margin:0 0 0 .3em}header nav .wrap-separator{margin:0 .5em 0 .1em}header nav .fold{display:none}header nav .fold.shown{display:initial}header #btns{display:flex;gap:1em;align-items:center;padding-top:1.5px}header #btns a,header #btns button{width:24px;height:24px;border:none;background-color:rgba(0,0,0,0);padding:0;text-decoration:none;color:var(--text-color);cursor:pointer}@media (hover: hover){header #btns a:hover,header #btns button:hover{color:var(--primary-color)}}header #toc-toggle{display:none}@media (max-width: 1024px){header #toc-toggle{display:inline-block}header #toc-toggle.active{color:var(--primary-color)}}footer{font-size:.95rem;padding:15px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px;color:var(--text-pale-color)}footer .copyright{margin-right:auto}footer .credits{margin-left:auto}footer a{color:var(--text-pale-color)}@media (max-width: 374px){footer{flex-direction:column;gap:0}footer .copyright,footer .credits{margin:0}}body.blog #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.blog main{margin:60px 0}body.post #wrapper{display:flex;justify-content:space-between;font-size:18px}body.post #blank{order:1;position:sticky;width:calc((100% - var(--main-max-width))/2)}body.post main{order:2;width:100%;margin:0 auto;padding-top:45px;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.post article{padding:0 15px 30px;font-size:var(--paragraph-font-size);line-height:var(--paragraph-line-height)}body.post article #post-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:1em}body.post article #date{color:var(--text-pale-color);margin-bottom:1em}body.post article #date #publish,body.post article #date #updated{margin-right:20px}body.post article #tags{margin-bottom:1em;display:flex;gap:1em;flex-wrap:wrap}body.post article #tags a{color:var(--primary-color);text-decoration:none}body.post article #tags a span{font-size:.95em;margin-right:2px}body.post article #outdate_alert.hidden{display:none}body.post .mermaid{background:#fff}body.post .giscus{padding:0 15px}body.post aside{order:3;width:calc((100% - var(--main-max-width))/2);position:sticky;margin-top:195px;top:60px;height:min-content;font-size:var(--aside-font-size)}body.post aside nav{padding:5px 15px 5px 2em;min-width:60%;overflow-y:auto;max-height:calc(100vh - 50px - 5em);scrollbar-width:none}body.post aside nav::-webkit-scrollbar{width:0}body.post aside nav:hover::-webkit-scrollbar{width:4px}body.post aside ul{list-style-type:none;padding:0;line-height:2;margin:0}body.post aside a{text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-pale-color);position:relative;padding:0 1em}body.post aside a.h3{padding-left:2.5em;font-size:.95em}body.post aside a::before{display:block;content:"";width:2px;position:absolute;top:.6em;bottom:.7em;left:0em;background:rgba(0,0,0,0)}body.post aside a:hover,body.post aside a.active{color:var(--primary-color)}body.post aside a:hover::before{background-color:var(--primary-color)}body.post aside #back-to-top{z-index:99;height:28px;padding:0;position:fixed;bottom:1.5em;margin-left:3em;color:var(--text-pale-color);background:rgba(0,0,0,0);border:none;cursor:pointer;transform:translateY(-5px) scale(0);transition:transform .2s}body.post aside #back-to-top svg{width:28px;height:28px}body.post aside #back-to-top.shown{transform:translateY(0px) scale(1)}body.post aside #back-to-top:hover{color:var(--primary-color)}@media screen and (max-width: 1024px){body.post aside{position:fixed;right:-100%;top:45px;margin-top:0;min-width:260px;height:100%;background-color:var(--bg-color);box-shadow:rgba(0,0,0,.08) -2px 8px 8px 0px}body.post aside.shown{right:0}body.post aside nav{padding:1em 0}body.post aside ul{padding-left:10px}body.post aside #back-to-top{display:none}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){body.post aside.blur{background-color:fade(var(--bg-color), 75%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}body.post #blank{display:none}body.post main{margin:0 auto}}body.tag-list #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.tag-list main{margin:85px auto 60px}body.tag-list .title{width:min-content;font-size:1.3em;margin:0 auto}body.tag-list .tags{margin-top:40px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;font-size:1.1em}body.tag-list .tags a{color:var(--primary-color);text-decoration:none;margin:2em}body.tag-single #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.tag-single main{width:100%;margin:85px auto 60px}body.tag-single .title{width:min-content;white-space:nowrap;color:var(--text-color);font-size:1.3em;margin:0 auto;margin-bottom:40px;padding:0 0 0 60px}body.tag-single .title a{margin-left:30px;font-size:.5em;color:var(--primary-color)}body.tag-single .post{display:flex;justify-content:space-between;align-items:flex-end;gap:5px;padding:6px 15px;margin:1px 0;border-radius:2px;font-size:1.1em;text-decoration:none;color:var(--primary-color);-webkit-tap-highlight-color:rgba(0,0,0,0)}body.tag-single .post:hover{background-color:var(--primary-pale-color)}body.tag-single .post .date{white-space:nowrap}@media screen and (max-width: 768px){body.tag-single .post{font-size:1em;margin:2.5px 5px;padding:5px 10px}}body.projects #wrapper{margin:0 auto;max-width:var(--main-max-width);min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}body.projects main{width:100%;margin:90px auto 40px}body.projects .proj{margin:0px 15px 45px}body.projects .proj .name{font-size:1.2em;margin:0 0 15px 0;color:var(--primary-color)}body.projects .proj .desc{line-height:1.5;margin:0 0 10px 0}body.projects .proj .desc a{color:var(--primary-color);text-decoration:underline var(--primary-pale-color) 2px}body.projects .proj .desc a:hover{text-decoration-color:var(--primary-color)}body.projects .proj .desc p>code{font-family:var(--code-font);font-size:.8em;padding:1px 6px;color:var(--primary-color);background-color:var(--primary-pale-color);border-radius:4px}body.projects .proj .more{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em}body.projects .proj .more .tags{font-size:.9em;display:flex;gap:.5em 1em;flex-wrap:wrap}body.projects .proj .more .tags div{color:var(--text-pale-color)}body.projects .proj .more .tags div span{font-size:.9em;margin-right:1.5px}body.projects .proj .more .links{margin-left:auto;display:flex;justify-content:end;gap:.5em 1em}body.projects .proj .more .links a{text-decoration:none;border-bottom:1.5px solid var(--primary-color);padding:0 2px;cursor:pointer;color:inherit}body.projects .proj .more .links a:visited{color:inherit}body.projects .proj .more .links a:hover{color:var(--primary-color)}body.not-found{height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}body.not-found .wrapper{display:flex;flex-direction:column;align-items:center;gap:3em}body.not-found .error{display:flex;align-items:center;font-size:2em;color:var(--text-pale-color)}body.not-found .spacer{background:var(--text-pale-color);width:2px;height:.75em;margin:0 .5em}body.not-found .text{font-size:.85em}body.not-found a{color:var(--primary-color);text-decoration-color:var(--primary-pale-color)}body.not-found a:hover,body.not-found a:active{text-decoration-color:var(--primary-color)}html{line-height:1.15;-webkit-text-size-adjust:100%;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:rgba(0,0,0,0)}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;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;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}