html{
--clr-bg-primary:#121212;
--clr-text-primary:#d3d3d3;
--clr-bg-nav:#171717;
--clr-bg-nav-hover:#2a2a2a;
--clr-bg-nav-here:#212121;
--clr-bg-submenu:#1c1b1a;
--clr-border-nav-item:#282828;
--clr-border-submenu:#2b2b2b;
--clr-border-submenu-left:#2f2f33;
--clr-skip-link-bg:#2b2b2b;
--clr-skip-link-text:#ccc6b8;
--clr-overlay-bg:rgba(18,18,18,0.92);
--clr-sublist-arrow:#ffe3b3;
--clr-links:#b48787;
--clr-button:#232321;
--clr-button-hover:#282826;
--fonts:Hack,"Fira Code","Source Code Pro",monospace;
--fonts-mono:Hack,"Fira Code","Source Code Pro",monospace;
--sidebar-width-desktop:250px;
--sidebar-width-mobile-ribbon:32px;
--sidebar-width-mobile-fs:24px;
--sidebar-width-mobile-expanded:70vw;
--global-fs:clamp(14px,0.4vw+0.6rem,18px);
--clr-msg-debug-bg:#2a2a2a;
--clr-msg-debug-text:#bbbbbb;
--clr-msg-info-bg:#1c1c2e;
--clr-msg-info-text:#aabbee;
--clr-msg-success-bg:#2d4a2d;
--clr-msg-success-text:#a6dba6;
--clr-msg-warning-bg:#614200;
--clr-msg-warning-text:#ffe57f;
--clr-msg-error-bg:#520000;
--clr-msg-error-text:#ff8a8a;
--scanline-fill:32,32,32;
--scanline-base:255,255,255;
--scanline-primary:200,230,255;
--scanline-secondary:255,255,240;
--scanline-clr0:rgba(239,228,209,0.035);
--scanline-clr1:rgba(244,221,204,0.023);
--scanline-clr2:rgba(230,240,230,0.03);
--scanline-clr3:rgba(220,230,245,0.025);
--scanline-clr4:rgba(245,235,225,0.02);
--scanline-clr5:rgba(250,240,230,0.028);
--scanline-clr6:rgba(235,225,215,0.032);
--scanline-clr7:rgba(240,230,240,0.022);
--clr-footer-text:#c9c9c9;
--clr-footer-links:#ffb3b3;
--clr-link-border:#fbf9f0;
--clr-disabled:#bbb;
--clr-disabled-bg:#444;
--clr-tor:#b75aff;
}
html.light{
--clr-bg-primary:#f5f3f0;
--clr-text-primary:#2b2520;
--clr-bg-nav:#ede8e0;
--clr-bg-nav-hover:#e0d8c8;
--clr-bg-nav-here:#ddd3c1;
--clr-bg-submenu:#e5dfd5;
--clr-border-nav-item:#a89080;
--clr-border-submenu:#a38c77;
--clr-border-submenu-left:#8b7860;
--clr-skip-link-bg:#b8a890;
--clr-skip-link-text:#3a342b;
--clr-overlay-bg:rgba(43,37,32,0.75);
--scanline-fill:235,225,215;
--scanline-base:180,160,140;
--scanline-primary:190,170,150;
--scanline-secondary:210,190,170;
--scanline-clr0:rgba(200,180,160,0.06);
--scanline-clr1:rgba(195,175,155,0.05);
--scanline-clr2:rgba(205,185,165,0.055);
--scanline-clr3:rgba(210,190,170,0.05);
--scanline-clr4:rgba(220,200,180,0.045);
--scanline-clr5:rgba(225,205,185,0.055);
--scanline-clr6:rgba(210,190,170,0.06);
--scanline-clr7:rgba(205,190,170,0.05);
--clr-links:#751f0e;
--clr-button:#e5ddd0;
--clr-button-hover:#ede4d7;
--clr-msg-debug-bg:#d5cfc0;
--clr-msg-debug-text:#3a342b;
--clr-msg-info-bg:#e8edf5;
--clr-msg-info-text:#2c3e5c;
--clr-msg-success-bg:#dde8d0;
--clr-msg-success-text:#2d4a2d;
--clr-msg-warning-bg:#f0e6c0;
--clr-msg-warning-text:#8b6914;
--clr-msg-error-bg:#f2d0c0;
--clr-msg-error-text:#a0342c;
--clr-sublist-arrow:#8b4513;
--clr-footer-text:#423b31;
--clr-footer-links:#a0342c;
--clr-link-border:#2b2520;
--clr-disabled:#555;
--clr-disabled-bg:#ccc;
--clr-tor:#8e44ad;
}
/* Global Reset and Base Styles */
*,
*::before,
*::after{
-webkit-box-sizing:border-box;
box-sizing:border-box;
word-wrap:break-word;
scroll-behavior:smooth;
font-family:var(--fonts);
color:var(--clr-text-primary);
border-color:var(--clr-text-primary);
}
code,
code *,
pre,
pre *{
white-space:pre-wrap;
white-space:-pre-wrap;
font-family:var(--fonts-mono);
}
code,
pre{
letter-spacing:0.15ch;
}
html{
height:100%;
min-height:100%;
}
body{
min-height:100vh;
margin:0;
padding:0;
background-color:var(--clr-bg-primary);
font-family:sans-serif;
}
html,
body{
font-size:var(--global-fs);
line-height:1.5;
overflow:auto;
}
ul,
ol,
ul *,
ol *{
line-height:1.8;
}
a,
abbr{
-webkit-text-decoration-line:underline;
text-decoration-line:underline;
-webkit-text-decoration-style:dotted;
text-decoration-style:dotted;
text-underline-offset:5px;
-webkit-text-decoration-color:var(--clr-link-border);
text-decoration-color:var(--clr-link-border);
}
[aria-disabled="true"],
[aria-disabled="true"] *,
[aria-disabled="true"]:hover,
[aria-disabled="true"] *:hover,
[aria-disabled="true"]:focus,
[aria-disabled="true"] *:focus,
[disabled],
[disabled] *,
[disabled]:hover,
[disabled] *:hover,
[disabled]:focus,
[disabled] *:focus{
color:var(--clr-disabled) !important;
border-color:var(--clr-disabled) !important;
pointer-events:none !important;
text-decoration:none !important;
-webkit-transition:none !important;
-o-transition:none !important;
transition:none !important;
-webkit-animation:none !important;
animation:none !important;
-webkit-animation-play-state:paused !important;
animation-play-state:paused !important;
pointer-events:none !important;
scroll-behavior:auto !important;
--clr-text-primary:var(--clr-disabled);
--clr-skip-link-text:var(--clr-disabled);
--clr-sublist-arrow:var(--clr-disabled);
--clr-links:var(--clr-disabled);
--clr-border-submenu:var(--clr-disabled);
--clr-border-submenu-left:var(--clr-disabled);
--clr-button:var(--clr-disabled-bg);
--clr-bg-primary:var(--clr-disabled-bg);
--clr-bg-nav:var(--clr-disabled-bg);
--clr-bg-nav-hover:var(--clr-disabled-bg);
--clr-bg-nav-here:var(--clr-disabled-bg);
--clr-bg-submenu:var(--clr-disabled-bg);
--clr-border-nav-item:var(--clr-disabled-bg);
--clr-skip-link-bg:var(--clr-disabled-bg);
}
a,
a *{
color:var(--clr-links);
font-style:italic;
}
a:hover,
a:focus{
-webkit-text-decoration-color:var(--clr-links);
text-decoration-color:var(--clr-links);
text-decoration:underline;
-webkit-text-decoration-style:solid;
text-decoration-style:solid;
}
a:has(img),
a img{
outline:none;
}
a:hover>img,
a:focus>img{
outline:1px solid var(--clr-text-primary);
}
img{
max-width:100%;
height:auto;
}
/* Skip to content link */
#skip-link{
position:absolute;
top:-100px;
background-color:var(--clr-skip-link-bg);
color:var(--clr-skip-link-text);
border:1px solid var(--clr-skip-link-text);
z-index:99999;
font-weight:bold;
font-size:1.5rem;
text-decoration:none;
text-align:center;
width:100%;
-webkit-transition:top 0.3s ease;
-o-transition:top 0.3s ease;
transition:top 0.3s ease;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#skip-link:focus,
#skip-link:active{
top:0;
padding:0.5em;
}
h1{
text-align:center;
font-size:2em;
margin:0.5em 0;
}
/* Navigation Sidebar */
nav{
position:fixed;
top:0;
left:0;
height:100dvh;
width:var(--sidebar-width-mobile-ribbon);
background-color:var(--clr-bg-nav);
color:var(--clr-text-primary);
overflow-y:auto;
-webkit-box-shadow:1px 0 6px rgba(0,0,0,0.5);
box-shadow:1px 0 6px rgba(0,0,0,0.5);
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-transition:width 0.3s ease;
-o-transition:width 0.3s ease;
transition:width 0.3s ease;
z-index:3000;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-ms-overflow-style:none;
scrollbar-width:none;
overscroll-behavior-y:contain;
}
nav::-webkit-scrollbar{
display:none;
}
nav.expanded{
width:var(--sidebar-width-mobile-expanded);
}
nav ul{
line-height:1.5;
display:none;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
margin:0;
padding:0;
}
nav.expanded ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
}
nav ul li,
nav ul ul li{
border-bottom:1px solid var(--clr-border-nav-item);
position:relative;
list-style:none;
}
nav ul li a,
nav ul li button{
display:block;
width:100%;
padding:0.875rem 1.25rem;
background-color:none;
border:none;
text-align:left;
cursor:pointer;
font-size:1rem;
-webkit-transition:background-color 0.3s ease;
-o-transition:background-color 0.3s ease;
transition:background-color 0.3s ease;
}
nav ul ul li button,
nav ul li button{
background-color:var(--clr-button);
}
nav>ul>li>a,
nav>ul>li>ul>li>a,
nav>ul>li>a:hover,
nav>ul>li>ul>li>a:hover,
nav>ul>li>a:focus,
nav>ul>li>ul>li>a:focus{
text-decoration:none;
}
nav ul li a:hover,
nav ul li button:hover,
nav ul li a:focus,
nav ul li button:focus,
nav ul li.nav-here>a:hover,
nav ul li.nav-here>button:hover,
nav ul li.nav-here>a:focus,
nav ul li.nav-here>button:focus{
background-color:var(--clr-bg-nav-hover);
}
/* Submenu Styling */
nav ul ul{
display:block;
margin:0;
padding-left:0;
list-style:none;
overflow:hidden;
max-height:0;
-webkit-transition:max-height 0.3s ease;
-o-transition:max-height 0.3s ease;
transition:max-height 0.3s ease;
background-color:var(--clr-bg-submenu);
border-left:3px solid var(--clr-border-submenu-left);
}
nav ul li.expanded>ul{
max-height:999px;
margin:0;
}
/* Indent submenu items */
nav ul ul li{
padding-left:1em;
}
nav ul ul li a,
nav ul ul li button{
display:block;
width:100%;
padding:0.625rem 1.25rem;
font-size:0.9rem;
border-bottom:1px solid var(--clr-border-submenu);
background-color:var(--clr-bg-submenu);
}
nav ul ul li:last-child a,
nav ul ul li:last-child button{
border-bottom:none;
}
/* noscript styling */
noscript{
text-align:center;
}
/* Toggle button */
#nav-nojs,
#nav-toggle-btn{
width:100%;
height:100dvh;
background-color:transparent;
border:none;
color:var(--clr-text-primary);
cursor:pointer;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
font-size:var(--sidebar-width-mobile-fs);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-transition:background-color 0.3s ease;
-o-transition:background-color 0.3s ease;
transition:background-color 0.3s ease;
padding:0;
margin:0;
text-align:center;
text-decoration:none;
}
#nav-toggle-btn[aria-expanded="true"]{
height:var(--sidebar-width-mobile-ribbon);
}
#nav-toggle-btn:hover,
#nav-toggle-btn:focus{
background-color:var(--clr-bg-nav-hover);
}
/* Overlay */
#nav-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:var(--clr-overlay-bg);
opacity:0;
pointer-events:none;
-webkit-transition:opacity 0.3s ease;
-o-transition:opacity 0.3s ease;
transition:opacity 0.3s ease;
z-index:2500;
}
#nav-overlay.active{
opacity:1;
pointer-events:auto;
}
/* Jumps */
#nav-jumps{
display:-ms-grid;
display:grid;
-ms-grid-columns:1fr 1fr;
grid-template-columns:1fr 1fr;
}
#nav-jumps>*{
padding:0;
}
#nav-jumps,
#nav-jumps *{
font-size:1.3em;
text-align:center;
font-style:normal;
}
#nav-jumps>*:first-child{
border-right:1px solid var(--clr-border-nav-item);
}
/* Page Content */
article{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
min-height:100vh;
margin-left:var(--sidebar-width-mobile-ribbon);
padding:1.25rem;
color:var(--clr-text-primary);
}
header{
text-align:center;
}
#content{
padding:0.5em;
-webkit-box-flex:1;
-ms-flex:1 1 auto;
flex:1 1 auto;
}
footer,
footer *{
font-size:0.9rem;
color:var(--clr-footer-text);
}
footer a{
color:var(--clr-footer-links);
}
footer a:hover,
footer a:focus{
text-decoration-color:var(--clr-footer-links);
}
footer{
margin-top:1em;
max-width:1600px;
margin:auto;
}
footer>div>p{
text-align:center;
font-weight:bold;
}
footer>div:nth-child(1),
footer>div:nth-child(3){
display:none;
}
/* Media queries */
@media (min-width:900px){
nav{
width:var(--sidebar-width-desktop);
}
nav.expanded{
width:var(--sidebar-width-desktop);
}
nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
}
#nav-toggle-btn,
#nav-nojs{
display:none;
}
#nav-overlay{
display:none;
}
article{
margin-left:var(--sidebar-width-desktop);
}
#skip-link{
width:var(--sidebar-width-desktop);
}
footer{
display:grid;
grid-template-columns:1fr 3fr 1fr;
grid-gap:1em;
}
footer>div:nth-child(1),
footer>div:nth-child(3){
display:initial;
}
}
@media (max-width:899px){
nav.expanded{
position:fixed;
top:0;
left:0;
height:100dvh;
width:var(--sidebar-width-mobile-expanded);
z-index:3000;
}
article{
margin-left:var(--sidebar-width-mobile-ribbon);
}
}
/* Submenu toggle arrow */
.sublist-toggle{
position:relative;
padding-right:2rem;
}
.sublist-toggle::after{
content:"";
position:absolute;
right:10px;
top:50%;
-webkit-transform:translateY(-50%) rotate(0deg);
-ms-transform:translateY(-50%) rotate(0deg);
transform:translateY(-50%) rotate(0deg);
border:5px solid transparent;
border-top-color:var(--clr-sublist-arrow);
-webkit-transition:-webkit-transform 0.3s ease;
transition:-webkit-transform 0.3s ease;
-o-transition:transform 0.3s ease;
transition:transform 0.3s ease;
transition:
transform 0.3s ease,
-webkit-transform 0.3s ease;
transition:
transform 0.3s ease,
-webkit-transform 0.3s ease;
}
nav li.expanded>.sublist-toggle::after{
-webkit-transform:translateY(-50%) rotate(180deg);
-ms-transform:translateY(-50%) rotate(180deg);
transform:translateY(-50%) rotate(180deg);
}
/* Accessibility - reduce motion */
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
-webkit-transition:none !important;
-o-transition:none !important;
transition:none !important;
-webkit-animation:none !important;
animation:none !important;
-webkit-animation-play-state:paused !important;
animation-play-state:paused !important;
scroll-behavior:auto !important;
}
}
/* The "hi" text */
#hi{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
height:6rem;
text-align:center;
}
#hi p{
max-width:80%;
margin:0;
}
nav ul li.expanded>ul{
max-height:999px;
margin:0;
}
nav ul li.nav-here>a,
nav ul li.nav-here>button{
background-color:var(--clr-bg-nav-here);
border-right:1px solid var(--clr-sublist-arrow);
}
/* Flash messages */
.messages{
list-style:none;
padding:0;
margin:1rem 0;
}
.messages li{
padding:0.75rem 1rem;
margin-bottom:0.5rem;
}
.msg-debug{
background-color:var(--clr-msg-debug-bg);
color:var(--clr-msg-debug-text);
border:1px solid var(--clr-msg-debug-text);
}
.msg-info,
.msg-message{
background-color:var(--clr-msg-info-bg);
color:var(--clr-msg-info-text);
border:1px solid var(--clr-msg-info-text);
}
.msg-success{
background-color:var(--clr-msg-success-bg);
color:var(--clr-msg-success-text);
border:1px solid var(--clr-msg-success-text);
}
.msg-warning{
background-color:var(--clr-msg-warning-bg);
color:var(--clr-msg-warning-text);
border:1px solid var(--clr-msg-warning-text);
}
.msg-error,
.msg-fatal{
background-color:var(--clr-msg-error-bg);
color:var(--clr-msg-error-text);
border:1px solid var(--clr-msg-error-text);
}
.msg-fatal{
font-weight:bold;
font-style:italic;
}
/* Animation management */
.no-animate *,
.no-animate *::before,
.no-animate *::after,
.no-animate::before,
.no-animate::after{
-webkit-transition:none !important;
-o-transition:none !important;
transition:none !important;
-webkit-animation:none !important;
animation:none !important;
-webkit-animation-play-state:paused !important;
animation-play-state:paused !important;
pointer-events:none !important;
scroll-behavior:auto !important;
}
/* General CSS */
mark{
background-color:var(--clr-msg-warning-bg);
color:var(--clr-msg-warning-text);
padding:0.2em;
}
blockquote{
max-width:100%;
margin:1.5em 10px;
padding:0.5em;
border-left:6px solid var(--clr-text-primary);
background-color:var(--clr-bg-submenu);
font-style:italic;
font-size:1.1em;
line-height:1.5;
quotes:"“" "”";
}
blockquote::before{
content:open-quote;
font-size:3em;
margin-top:-0.8em;
position:absolute;
}
blockquote>*{
margin:0;
padding-left:1em;
}
code,
pre{
background-color:var(--clr-bg-submenu);
}
code{
display:inline-block;
padding:0.3em;
border-radius:2px;
white-space:normal;
word-break:break-word;
overflow-wrap:break-word;
}
pre{
padding:0.6em;
border-radius:4px;
display:block;
width:100%;
white-space:pre-wrap;
word-wrap:break-word;
overflow-wrap:break-word;
}
#top,
#bottom{
visibility:hidden;
z-index:-99999;
pointer-events:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
font-size:0px;
width:0px;
height:0px;
}
.site-birthday{
text-align:center;
}
#tor a:hover>img,
#tor a:focus>img{
outline:none;
}
#tor,
#tor *{
text-align:center;
font-style:normal;
}
#tor span{
color:var(--clr-tor);
text-decoration:underline;
-webkit-text-decoration-style:wavy;
text-decoration-style:wavy;
font-weight:bold;
}
#clear-state{
text-align:center;
font-style:italic;
}
.markdown *{
white-space:pre-wrap;
}
.markdown ul,
.markdown ol{
white-space:initial;
}
details{
border-left:2px dotted var(--clr-msg-info-text);
}
summary{
padding-left:1em;
padding-top:0.5em;
padding-bottom:0.5em;
}
details>div{
padding-left:1em;
padding-bottom:0.5em;
}