:root{color-scheme:light dark;--colour-blue:#129ed9;--colour-yellow:#fee601;--colour-magenta:#ea18e6;--colour-orange:orangered;--colour-black:#1f2227;--colour-blacker:#1c1b22;--colour-white:#fff;--colour-black-half:#1f222788;--colour-white-half:#fffc;--colour-reader-white:#e6e6e6;--colour-link:var(--colour-blue);--colour-link-hover:#3056a9;--colour-link-active:var(--colour-orange);--colour-link-visited:#6a60b0;--colour-link-visited-hover:#534fa3;--colour-rainbow:linear-gradient(90deg,rgba(232, 102, 102, 1) 0%, rgba(255, 171, 3, 1) 20%, rgba(104, 242, 80, 1) 40%, rgba(76, 237, 218, 1) 60%, rgba(136, 132, 232, 1) 80%, rgba(242, 48, 220, 1) 100%);--colour-rainbow-dark:linear-gradient(90deg,rgba(212, 110, 110, 1) 0%, rgba(242, 237, 141, 1) 20%, rgba(139, 240, 121, 1) 40%, rgba(110, 234, 220, 1) 60%, rgba(164, 162, 229, 1) 80%, rgba(237, 83, 219, 1) 100%);--font-header:bd-supper, system-ui, sans-serif;--font-body:mundial, system-ui, sans-serif;--font-code:aglet-mono, monospace;line-height:1.6;font-size:18px}html{&:not(.dark){--colour-background:var(--colour-white);--colour-text-body:var(--colour-black);--header-rainbow:var(--colour-rainbow);& body > header{background-color:var(--colour-white-half);color:var(--colour-blue)} #front-matter { background-color: #0000003f; } & body article { blockquote, pre, code { background-color: var(--colour-reader-white); } } #toggleMoon { display: inline-block; } #toggleSun { display: none; }}&.dark{--colour-background:var(--colour-blacker);--colour-text-body:var(--colour-reder-white);--header-rainbow:var(--colour-rainbow-dark);--colour-link:var(--colour-blue);--colour-link-hover:var(--colour-magenta);--colour-link-visited:#ad4aff;--colour-link-visited-hover:var(--colour-magenta);color:var(--colour-reader-white);& body > header{background-color:var(--colour-black-half);color:var(--colour-yellow)}& body article{blockquote, pre, code{background-color:var(--colour-black)}} #front-matter { background-color: #0000003f; } #toggleMoon { display: none; } #toggleSun { display: inline-block; }}}body{background-color:var(--colour-background);color:var(--colour-text-body)}.transi body{transition:color .25s ease-in-out,background-color .25s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);font-variant-numeric:oldstyle-nums proportional-nums}h1{font-family:var(--font-header);color:var(--colour-blue);background:#d46e6e;background-image:var(--header-rainbow);background-clip:text;background-size:100%;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent;text-shadow:none!important}.h1::selection,h1::selection{background:0 0;background-clip:initial;-webkit-background-clip:initial;-moz-background-clip:initial;color:#fff}::selection{background:var(--article-selection-bg,#345171)}::-moz-selection{background:var(--article-selection-bg,#345171)}.h1::selection,h1::selection{background:var(--article-selection-bg,#345171);color:#fff;-webkit-text-fill-color:#fff;-moz-text-fill-color:#fff}pre,code{font-family:var(--font-code);font-variant-numeric:lining-nums tabular-nums}table{font-variant-numeric:lining-nums tabular-nums}@keyframes rainbow{from{background-position-x:0}to{background-position-x:768px}}input#toggle-menu{display:none}@media(min-width:38rem){body{& > header{padding:1rem;font-size:26px;div#small-menu-button{display:none}}}}@media(max-width:38rem){html:not(.dark)>body>header ul{background-color:var(--colour-white-half)}body{& > header{padding:.5rem;font-size:26px;div#small-menu-button{display:block;height:1em;width:1em;& *{cursor:pointer}&:has(input#toggle-menu[type=checkbox]:checked) label{ #menu-icon-close { display: inline-block; } #menu-icon-open { display: none; }}&:has(input#toggle-menu[type=checkbox]:not(:checked)) label{ #menu-icon-close { display: none; } #menu-icon-open { display: inline-block; }}}div#small-menu-button:has(input#toggle-menu[type=checkbox]:checked) ~ nav{opacity:1;visibility:visible}nav{opacity:0;visibility:hidden;position:absolute;top:100%;left:0;width:100%;ul{flex-direction:column;backdrop-filter:blur(4px)brightness(50%);background-color:var(--colour-black-half);align-items:end;padding:.75rem 2rem}}}main{&.main-home{& #home-content{& #hero-logo{flex-direction:column}}}}}}body{display:flex;flex-direction:column;align-items:center;min-height:100vh;& > header{transition:padding .3s ease;backdrop-filter:blur(4px)brightness(50%);position:fixed;z-index:100;min-width:100%;top:0;left:0;display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-family:var(--font-header);& > a{display:flex;align-items:center;gap:16px;cursor:pointer;text-decoration:none;color:inherit;img{width:auto;height:1.5em;border-radius:50%;outline:0 solid var(--colour-magenta);outline-offset:0;transition:outline .5s ease-out,outline-offset .4s ease-out,background-color .25s ease-out}&:hover{color:var(--colour-magenta);img{background-color:var(--colour-magenta);outline:8px solid transparent;outline-offset:5px;transition-delay:0s}}&:not(:hover){img{transition:background-color .25s ease-out}}}nav{ul{display:flex;gap:1rem;list-style:none;li{min-width:1.25rem;a{font-size:.75em;text-decoration:none;color:inherit;&:hover{color:var(--colour-magenta);border-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="12" height="8"><path fill="none" stroke="magenta" stroke-width="2" d="M0,7c3,0,3-6,6-6s3,6,6,6"/></svg>')0 0 100% repeat;border-width:0 0 8px;border-style:solid}}svg{vertical-align:middle;cursor:pointer}}}}}& > footer{min-width:100%;text-align:center;font-size:.9rem;padding-top:2rem;padding-bottom:2rem;display:flex;flex-direction:column;gap:2rem;canvas#waveCanvas{display:block;width:100%;height:50px}a{color:inherit;text-decoration:underline}.socials{display:flex;gap:1rem;justify-content:center;svg{height:1rem}}}}main{flex:1;padding:1rem;margin-top:4rem;max-width:50rem;width:100%;a{color:var(--colour-link);border-radius:2px;text-decoration:none;&:visited{color:var(--colour-link-visited)}&:visited:hover{color:var(--colour-link-visited-hover)}&:hover{color:var(--colour-link-hover);text-decoration:underline}&:active{color:var(--colour-link-active);text-decoration:underline}}hr{height:1rem;background-image:url(/mr-zigzag.svg);background-size:.75rem;background-repeat:repeat-x;border:none;width:100%}&.main-home{max-width:unset;padding:unset;width:100%;min-height:100vh;position:relative;overflow:hidden; #starCanvas { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 0; pointer-events: none; width: 100%; min-width: 1020px; height: auto; } #home-content { z-index: 1; position: relative; padding: 1rem; max-width: 50rem; margin: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; #hero-logo { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 1rem; img { max-width: 10rem; height:auto; } div { display: flex; flex-direction:column; justify-content: center; align-items: center; gap: 0rem; h1 { font-size: 3rem; margin: none; line-height:1; } p { margin: none; } } } #front-matter { border-radius: 0.5rem; padding: 1rem 2rem 2rem 2rem; max-width: 35rem; width: 100%; backdrop-filter: blur(2px); & > p { text-align: center; } h2 { font-size: 1rem; } & > div { &.featured-post { margin-bottom: 1rem; } h3 { font-size: 1rem; } & > div { display: flex; flex-direction: row; justify-content: space-between; gap: 1em; time { font-size: 0.85em; } } & > p { padding-left: 1rem; font-size: 0.9em; } } hr { max-width: 20rem; width: 90%; margin: 1rem auto; border: 0.5px solid white; height: unset; background-image: unset; } } }}}article{header{margin:3rem 0 2rem;h1{font-size:2rem;margin-bottom:.5rem}}footer{margin-top:2rem;font-size:.875rem;color:gray;text-align:center}p{margin-bottom:1rem}h2, h3{margin-top:2rem;margin-bottom:.5rem}ul, ol{margin-left:1.5rem;margin-bottom:1rem}blockquote{margin:1rem 0;padding:1rem 2rem;font-style:italic;font-size:1.25em;border-radius:5px}div.highlight{max-width:calc(100vw - 2rem)}code{padding:.2em .4em;border-radius:4px}pre{padding:1em;overflow-x:auto;border-radius:5px;code{background:0 0;padding:0}}figure{margin:2rem 0;text-align:center;img{max-width:100%;height:auto;border-radius:8px}figcaption{font-size:.9rem;color:gray;margin-top:.5rem}}table{width:100%;border-collapse:collapse;margin:1.5rem 0;th, td{border:1px solid #ccc;padding:.5rem;text-align:left}}}hr.index-page{margin:1rem 0}.article-list{margin:1rem 0;&:not(:last-child){padding-bottom:2rem;border-bottom:1px solid}h2{font-size:1.25rem}p{padding-left:1rem;time{font-style:italic}}}