@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

@supports(display: grid) {
	:root {
		/* S-CSS-P Integration */
		/* If you're making a new CSS theme, please include the following three variables at minimum. */
		--theme-base: "black-highlighter";
		/* must be either "black-highlighter" or "sigma9" */
		--theme-id: "penumbra-bhl";
		/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
		--theme-name: "Penumbra BHL Theme";
		/* set this to your theme's full name */
		--lgurl: var(--logo-image);
		--header-subtitle: "SECURE - CONTAIN - PROTECT";
		/* Typefaces */
		--body-font: "Roboto", sans-serif;
		--header-font: "Josefin Sans", sans-serif;
		--title-font: "Josefin Sans", sans-serif;
		--mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, monospace;
		--ui-wght: 600;
		--ui-hvr-wght: 800;
		/* Standard Colors */
		--white-monochrome: 248, 248, 248;
		/* white */
		--pale-gray-monochrome: 237, 237, 237;
		/* v light gray for blockquotes and stuff */
		--light-pale-gray-monochrome: 237, 237, 237;
		/* very light pale gray for misc. use */
		--very-light-gray-monochrome: 215, 215, 215;
		/* very light accent gray for misc. use */
		--light-gray-monochrome: 160, 160, 160;
		/* light accent gray for login status */
		--gray-monochrome: 66, 66, 72;
		/* gray */
		--dark-gray-monochrome: 47, 51, 60;
		/* dark accent gray for sidebar background */
		--black-monochrome: 33, 37, 46;
		/* black */
		--accentColor: 30, 181, 232;
		/*Penumbra Accent Color*/
		--pale-accent: var(--accentColor);
		/* light red, for visited links */
		--bright-accent: var(--accentColor);
		/* bright red */
		--medium-accent: var(--accentColor);
		/* medium red - the "default" accent color */
		--dark-accent: var(--accentColor);
		/* dark red */
		--alt-accent: 221, 102, 17;
		/* pale orange, for newpage links */
		/* Background and Header Colors */
		--background-gradient-color: var(--black-monochrome);
		/* Primary Theme Colors */
		--swatch-background: var(--dark-gray-monochrome);
		/* Primary Text Colors */
		--swatch-text-light: var(--pale-gray-monochrome);
		--swatch-text-general: var(--swatch-text-light);
		/* Primary Menu Colors */
		--swatch-menubg-color: var(--black-monochrome);
		--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
		--swatch-alternate-color: var(--swatch-menubg-dark-color);
		/* Link Colors */
		--sidebar-links-text: var(--bright-accent);
		/* Rating Module Colors */
		--rating-module-button-color: var(--white-monochrome);
		--rating-module-text-color: var(--swatch-menutxt-light-color);
		/* Header Gradients */
		--diagonal-stripes: initial;
		/* header measurements */
		--header-height-on-desktop: 8.750rem;
		--header-height-on-mobile: 8.750rem;
		--header-h1-font-size: calc(2rem + (2.75 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
		--header-h2-font-size: calc(var(--base-font-size) * 1.15);
		/* Toggle Sidebar Variable */
		--toggle-border-color: rgb(var(--swatch-primary));
		--toggle-icon-color: rgb(var(--swatch-primary));
		--toggle-roundness: 0;
	}

	/* ===PAGE ELEMENTS COLORS=== */
	:root {
		/* ===UI BUTTON COLORS=== */
		--ui-button-bg: var(--swatch-menubg-medium-dark-color);
		--ui-button-txt: var(--swatch-text-secondary-color);
		--ui-button-hover-txt: var(--swatch-text-secondary-color);
		/* ===MODALS COLORS=== */
		--modal-bg: var(--black-monochrome);
		--modal-body-text: var(--swatch-text-secondary-color);
		--modal-body-header-txt: var(--swatch-primary);
		--modal-header-bg: var(--black-monochrome);
		/* ===FOOTNOTES HOVER BLOCK COLORS=== */
		--hoverblock-bg: var(--swatch-menubg-medium-dark-color);
		--hoverblock-txt: var(--swatch-text-general);
	}
	
	#main-content {
		/* ===TABS===*/
		--tabs-bg: var(--swatch-menubg-medium-dark-color);
		--tabs-content-bg-color: var(--swatch-menubg-medium-dark-color), 1;
		/* ===BLOCKQUOTES=== */
		--blockquote-bg-color: var(--swatch-menubg-medium-dark-color), 1;
	}

	#header {
		/* Primary Header Colors */
		--swatch-headerh1-color: var(--bright-accent);
		--swatch-headerh2-color: var(--bright-accent);
	}

	#footer {
		--footer-link-hover-color: var(--swatch-text-tertiary-color);
	}

	::-moz-selection {
		background: rgba(var(--swatch-primary), 1);
		color: rgb(var(--black-monochrome)) !important;
		text-shadow: none;
	}

	::selection {
		background: rgba(var(--swatch-primary), 1);
		color: rgb(var(--black-monochrome)) !important;
		text-shadow: none;
	}

	html,
	body {
		scrollbar-color: rgb(var(--swatch-primary)) rgb(var(--black-monochrome));
	}

	body {
		background-image: var(--gradient-background);
		background-size: 100% var(--background-gradient-distance);
	}

	.danger-diamond a,
	.danger-diamond a:hover {
		color: rgba(0, 0, 0, 0) !important;
		box-shadow: initial !important;
	}

	#header::before {
		background-image: var(--lgurl);
		opacity: 0.15;
		background-size: auto 9.5rem;
	}

	#header h1 a {
		text-transform: uppercase;
	}

	#header h1,
	#header h1 a,
	#header h1 a::before {
		top: 0.35rem;
	}

	#header h2 {
		top: calc(var(--header-h2-font-size) * 0.9);
	}

	#side-bar .heading {
		background: none;
		flex-basis: 90%;
		margin: 0.5rem auto 0.125rem;
		font-family: var(--header-font);
	}

	#side-bar .heading p,
	#side-bar .side-block>.collapsible-block .collapsible-block-link {
		text-transform: none;
		text-align: left;
		font-size: 0.94rem;
		text-indent: 0;
	}

	#page-content {
		font-size: 0.9rem !important;
	}

	#page-title {
		color: rgb(var(--swatch-text-general));
		border-color: rgb(var(--swatch-text-general));
		padding: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: rgb(var(--swatch-primary));
	}

	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
		color: rgb(var(--white-monochrome));
	}

	#login-status #my-account {
		--wght: 400;
		font-weight: 400;
	}

	#top-bar div.mobile-top-bar>ul>li>ul>li>a,
	#top-bar div.top-bar>ul>li>ul>li>a {
		--wght: 400;
		font-weight: 400;
	}

	#top-bar div.mobile-top-bar>ul>li>ul>li:hover a,
	#top-bar div.top-bar>ul>li>ul>li:hover a {
		color: rgb(var(--black-monochrome));
	}

	#page-content a:not([href*="user"]):not([href*="javascript:;"]) {
		padding: 0.15em;
		margin: -0.15em;
		color: rgb(var(--white-monochrome));
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
		transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover {
		padding: 0.3em 0.25em 0.2em 0.25em;
		margin: -0.25em;
		box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
		text-decoration: none;
		color: rgb(var(--black-monochrome))
	}

	.page-rate-widget-box {
		background: rgb(var(--black-monochrome));
	}

	/* Ayer's info-bar patch by Monkatraz */
	#page-content .info-container .collapsible-block-folded,
	#page-content .info-container .collapsible-block-unfolded-link {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		box-shadow: none;
	}

	#page-content .info-container .collapsible-block-link {
		padding: 0;
	}

	#page-content .info-container .collapsible-block-link::before,
	#page-content .info-container .collapsible-block-unfolded-link::before {
		content: " ";
		display: none;
	}

	#page-content .info-container .collapsible-block-content::after {
		display: none;
	}

	#u-author_block>p>a {
		background-color: rgb(var(--black-monochrome));
		border-radius: 0;
	}

	:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]),
	#toc {
		background-color: rgb(var(--black-monochrome));
		border: solid 0.125rem rgb(var(--dark-gray-monochrome));
		box-shadow: -0.188rem 0rem 0rem -0.006rem rgb(var(--swatch-primary));
	}

	.code {
		background-color: rgb(var(--black-monochrome));
		border: solid 0.1875rem rgb(var(--dark-gray-monochrome));
		box-shadow: none;
	}

	.code pre,
	.code p,
	.code {
		font-size: 0.87rem;
		background-color: rgb(var(--black-monochrome));
		color: rgb(var(--swatch-text-general));
	}

	.code pre {
		white-space: pre-wrap;
	}

	.code pre span[class*="hl-"] {
		-webkit-filter: invert(1) hue-rotate(180deg);
		filter: invert(1) hue-rotate(180deg);
	}

	#page-content .yui-navset .yui-nav {
		width: 100%;
	}

	#page-content .yui-navset .yui-nav a {
		transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	#page-content .yui-navset .yui-nav li,
	#page-content .yui-navset .yui-navset-top .yui-nav li {
		box-shadow: initial;
	}

	#page-content .yui-navset .yui-nav li {
		background-color: rgb(var(--black-monochrome));
		padding-top: 0.25em;
		-webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: forward;
		animation-fill-mode: forward;
		-webkit-animation-play-state: paused;
		animation-play-state: paused;
	}

	#page-content .yui-navset .yui-nav li:hover {
		background-color: rgb(var(--swatch-primary));
	}

	#page-content .yui-navset .yui-nav li em {
		transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
		color: rgb(var(--swatch-menutxt-light-color));
	}

	#page-content .yui-navset .yui-nav li:hover em {
		color: rgb(var(--swatch-menutxt-dark-color));
	}

	#page-content .yui-navset .yui-nav .selected {
		margin-top: -0.5em;
		padding-top: 0.5em;
		margin-right: 0.0625rem;
		background-color: rgb(var(--swatch-primary));
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-fill-mode: backwards;
		animation-fill-mode: backwards;
		-webkit-animation-play-state: running;
		animation-play-state: running;
	}

	#page-content .yui-navset .yui-nav .selected a em {
		transform: translateY(-0.25em);
		color: rgb(var(--black-monochrome));
	}

	#page-content .yui-navset .yui-nav a,
	#page-content .yui-navset .yui-nav a:hover,
	#page-content .yui-navset .yui-nav a:active,
	#page-content .yui-navset .yui-nav a:focus-within {
		background: rgba(0, 0, 0, 0) !important;
		font-family: var(--title-font);
		font-weight: 700;
		isolation: isolate;
	}

	#page-content .yui-navset .yui-nav a::before,
	#page-content .yui-navset .yui-nav a::after {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		pointer-events: none;
	}

	#page-content .yui-navset .yui-nav a:hover::before,
	#page-content .yui-navset .yui-nav a:focus::before,
	#page-content .yui-navset .yui-nav .selected a::before {
		-webkit-mask-position: center 0rem !important;
		mask-position: center 0rem !important;
		background-position: 100% 200vh;
	}

	#page-content .yui-navset .yui-nav a:hover::after,
	#page-content .yui-navset .yui-nav a:focus::after,
	#page-content .yui-navset .yui-nav .selected a::after {
		opacity: 0;
		-webkit-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		-webkit-animation-direction: backwards;
		animation-direction: backwards;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
	}

	#page-content :is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-content {
		background: rgb(var(--black-monochrome));
		border: none;
		margin-top: 0;
	}

	#page-content table.wiki-content-table tr {
		border: none !important;
	}

	#page-content table.wiki-content-table th {
		background-color: rgb(var(--black-monochrome));
		color: rgb(var(--swatch-primary));
		;
		font-family: var(--title-font);
		font-weight: 700;
		text-transform: uppercase;
		padding-top: 0.4em;
	}

	#page-content table.wiki-content-table th,
	#page-content table.wiki-content-table td {
		border: solid 0.0625rem rgb(var(--swatch-primary)) !important;
	}

	hr {
		border-color: rgb(var(--accentColor));
		background-color: rgb(var(--accentColor));
	}

	/*---- TAB ANIMATION by Croquembouche ---- */
	#page-content .yui-navset .yui-content>div {
		display: block;
		top: 0;
		overflow: hidden;
		transform-origin: 0 0;
	}

	#page-content .yui-navset .yui-content>div[style*="none"] {
		display: block !important;
		flex: 0;
		max-height: 0;
		padding: 0 0.5em;
		border-width: 0;
		/* The following transition affects the one that DISAPPEARS */
		transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0s;
		-webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
		animation: tab-disappear 0.5s ease-in-out 0s 1 both;
	}

	#page-content .yui-navset .yui-content>div[style*="block"] {
		display: block !important;
		flex: 1;
		max-height: 9999rem;
		/* The following transition affects the one that APPEARS */
		transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0.5s;
		-webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
		animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
	}

	@-webkit-keyframes tab-disappear {
		0% {
			max-height: 9999rem;
		}

		1% {
			max-height: 100vh;
		}

		100% {
			max-height: 0;
		}
	}

	@keyframes tab-disappear {
		0% {
			max-height: 9999rem;
		}

		1% {
			max-height: 100vh;
		}

		100% {
			max-height: 0;
		}
	}

	@-webkit-keyframes tab-appear {
		0% {
			max-height: 0;
		}

		99% {
			max-height: 100vh;
		}

		100% {
			max-height: 9999rem;
		}
	}

	@keyframes tab-appear {
		0% {
			max-height: 0;
		}

		99% {
			max-height: 100vh;
		}

		100% {
			max-height: 9999rem;
		}
	}

	/* fancy collapsible */
	#page-content .collapsible-block-folded,
	#page-content .collapsible-block-unfolded-link {
		background: rgb(var(--black-monochrome));
		transition: background 0.25s linear;
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
		overflow: hidden;
		margin: auto;
		box-sizing: border-box;
	}

	#page-content .collapsible-block-folded .collapsible-block-link::before {
		content: "▷ ";
	}

	#page-content .collapsible-block-unfolded .collapsible-block-link::before {
		content: "▽ ";
	}

	#page-content .collapsible-block-link {
		display: inline-block;
		padding: 0.5rem 1rem;
		text-decoration: none;
		text-align: center;
		color: rgb(var(--white-monochrome));
		font-weight: 700;
	}

	#page-content .collapsible-block-link:hover {
		color: rgb(var(--black-monochrome));
	}

	#page-content .collapsible-block-folded:hover,
	#page-content .collapsible-block-unfolded-link:hover {
		background: rgb(var(--swatch-primary));
	}

	#page-content .collapsible-block-unfolded-link {
		box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary));
	}

	#page-content .collapsible-block-folded,
	#page-content .collapsible-block-unfolded-link {
		margin-top: 0.625rem;
		margin-bottom: 0.625rem;
	}

	:is(div.image-block, div.scp-image-block) {
		border: solid 0.5rem rgb(var(--black-monochrome));
		border-bottom: solid 0rem rgb(var(--black-monochrome));
		box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
		box-sizing: border-box;
	}

	:is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
		background-color: rgb(var(--black-monochrome));
		border: solid 0.25rem rgb(var(--black-monochrome));
		color: rgb(var(--pale-gray-monochrome));
		font-size: 0.84rem;
		box-shadow: none;
	}

	a.footnoteref {
		padding: 0.05em;
		color: rgb(var(--swatch-primary));
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		box-shadow: inset 0 0 0 0rem rgba(var(--swatch-primary), 1);
		transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	a.footnoteref:hover {
		box-shadow: inset 0 -1.25em 0 0 rgba(var(--swatch-primary), 1);
		text-decoration: none;
		color: rgb(var(--black-monochrome))
	}

	.footnotes-footer a[href*="javascript"]::before,
	.bibitems .bibitem::after,
	.footnotes-footer {
		background-color: rgb(var(--black-monochrome));
	}

	/* Tags */
	.page-tags span {
		border-top: 0.0625rem solid rgb(var(-white-monochrome));
	}

	.page-tags span a {
		padding: 0.25em;
		color: rgb(var(--white-monochrome));
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
		transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.page-tags span a:hover {
		padding: 0.3em 0.25em 0.2em 0.25em;
		box-shadow: inset 0 -1.75em 0 0 rgba(var(--swatch-primary), 1);
		text-decoration: none;
		color: rgb(var(--black-monochrome))
	}

	div#page-options-bottom-2>a,
	div#page-options-bottom>a {
		border-color: rgba(var(--swatch-primary-darkest), 1);
		background-color: rgba(var(--swatch-menubg-dark-color), 1);
		color: rgb(var(--white-monochrome));
		border-radius: 0;
	}

	div#page-options-bottom-2>a:active,
	div#page-options-bottom-2>a:hover,
	div#page-options-bottom>a:active,
	div#page-options-bottom>a:hover {
		border-color: rgba(var(--swatch-menubg-dark-color), 1);
		background-color: rgba(var(--swatch-primary-darkest), 1);
		color: rgb(var(--black-monochrome));
		border-radius: 0;
	}

	#who-rated-page-area>div>span[style*="color"] {
		color: rgb(var(--swatch-text-secondary-color)) !important;
	}

	#footer {
		color: rgb(var(--black-monochrome));
	}

	#license-area {
		color: rgb(var(--white-monochrome));
	}

	input.text,
	textarea {
		background-color: rgb(var(--black-monochrome));
		color: rgb(var(--swatch-text-general));
		border-color: rgb(var(--swatch-menubg-dark-color));
	}

	.page-source { 
		background: transparent; 
	}

	#action-area:has(form[onsubmit*=setParent],#who-rated-page-area,form[onsubmit*=PageTagsModule],table.page-files,#edit-meta-addbutton,ul[style="list-style: none"],#page-block-checkbox,#rename-option-rename,#rename-option-delete) p:not(:has(a[id*=backlinks],a[onclick*=showWho],a.btn)) {
		background-color: rgb(var(--black-monochrome));
	}

	#lock-info {
		background-color: rgb(var(--black-monochrome));
		color: rgb(var(--swatch-text-general));
		border-color: rgb(var(--swatch-menubg-dark-color));
	}

	/* Pop-Up Windows */
	.owindow {
		background-color: rgb(var(--black-monochrome));
		border-color: rgb(var(--swatch-primary));
	}

	.owindow .modal-header {
		background-color: rgb(var(--black-monochrome));
	}

	.owindow .modal-body img {
		background-color: transparent !important;
	}

	.owindow .title {
		background-color: rgb(var(--black-monochrome));
		color: var(--swatch-primary);
		border-bottom: 0.0625rem solid rgb(var(--swatch-primary));
	}

	.owindow .button-bar a {
		background-color: rgb(var(--black-monochrome));
		border-color: rgb(var(--swatch-primary));
		color: rgb(var(--white-monochrome));
	}

	.owindow .button-bar a:hover {
		background-color: rgb(var(--swatch-primary));
	}

	/* ---- Darkbox/Lightbox ---- */

	.darkbox,
	.lightbox {
		border-left: solid 0.26rem rgb(var(--swatch-primary));
		border-right: solid 0.26rem rgb(var(--swatch-primary));
		padding: .4rem;
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.darkbox {
		background-color: rgb(var(--black-monochrome));
	}

	.lightbox {
		background-color: rgb(var(--white-monochrome));
		color: rgb(var(--black-monochrome));
	}

	.lightbox h2,
	.lightbox h3,
	.lightbox h4,
	.lightbox h5,
	.lightbox h6 {
		color: rgb(var(--black-monochrome));
	}

	/* Custom Assets by EstrellaYoshte */
	.limit {
		margin-bottom: -1rem;
	}

	.anchor {
		position: -webkit-sticky;
		position: sticky;
		height: 0;
		top: 0;
		z-index: 9999;
	}

	.sidebox {
		background-color: rgb(var(--black-monochrome));
		border-top: solid 0.125rem rgb(var(--swatch-primary));
		padding: .14rem 1rem .14rem;
		margin-top: 0;
		margin-bottom: 0.5rem;
		width: calc((100vw - (var(--body-width-on-desktop) + 10rem))/2);
		max-height: calc(100vh - 18rem);
		position: absolute;
		top: 0;
		left: 103.5%;
		z-index: 5;
		overflow: auto;
		box-sizing: border-box;
	}

	.hovertip {
		color: rgb(var(--swatch-text-general));
	}

	@media (max-width: 80.625rem) {
		.sidebox {
			width: auto;
			max-width: 50vw;
			color: rgba(0, 0, 0, 0);
			background-color: rgba(0, 0, 0, 0);
			box-shadow: 0 0 0 0 rgb(var(--swatch-primary));
			border: none;
			right: calc(((100vw - 1em - var(--body-width-on-desktop)) / 2) * -1);
			left: initial;
			pointer-events: none;
			transition: max-width 0.2s ease-in-out 0.1s, color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, background-color 0s ease-in-out 0s;
			overflow-x: hidden;
			overflow-y: hidden;
			scrollbar-width: thin;
		}

		.sidebox::-webkit-scrollbar {
			width: 0.5em;
		}

		.sidebox * {
			opacity: 0;
			transition: opacity 0.2s ease-in-out 0.1s;
		}

		.sidebox::before,
		.sidebox::after {
			content: " ";
			position: absolute;
			pointer-events: all;
			right: 0;
		}

		.sidebox::before {
			top: calc(50% - 0.75rem);
			width: 0;
			height: 0;
			border-top: 0.75rem solid transparent;
			border-bottom: 0.75rem solid transparent;
			border-right: 0.75rem solid rgb(var(--swatch-primary));
			transition: border 0.1s ease-in-out 0.1s;
			z-index: 10;
		}

		.sidebox::after {
			top: 0;
			max-width: 0.75rem;
			width: 100%;
			height: 100%;
			box-shadow: 0.125rem 0 0 0 rgb(var(--swatch-primary));
			max-height: calc(100vh - 18rem);
			background-color: rgb(var(--black-monochrome));
			z-index: -1;
			transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s, border-top-left-radius 0.5s ease-in-out 0.1s, border-bottom-left-radius 0.5s ease-in-out 0.1s;
		}

		.sidebox:hover,
		.sidebox:active {
			color: rgb(var(--swatch-text-general));
			background-color: rgb(var(--black-monochrome));
			pointer-events: all;
			overflow-y: scroll;
			transition: max-width 0.5s ease-in-out 0.2s, color 0.5s ease-in-out 0.2s, box-shadow 0.5s ease-in-out 0.1s, background-color 0s ease-in-out 0.6s, right 0.5s ease-in-out 0.1s;
		}

		.sidebox:hover *,
		.sidebox:active * {
			opacity: 1;
			transition: opacity 0.5s ease-in-out 0.2s;
		}

		.sidebox:hover::before,
		.sidebox:active::before {
			border-top: 0vw solid transparent;
			border-bottom: 0vw solid transparent;
		}

		.sidebox:hover::after,
		.sidebox:active::after {
			box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary));
			right: 0;
			max-width: 100%;
			border-top-left-radius: 0rem;
			border-bottom-left-radius: 0rem;
		}
	}

	@media only screen and (max-width:56.25rem) {
		:root {
			--body-width-on-desktop: 100vw;
			--header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
			--header-h2-font-size: var(--base-font-size);
		}

		#header h1,
		#header h1 a,
		#header h1 a::before {
			top: 0.5rem;
		}

		#header h2,
		#header h2 a,
		#header h2 a::before {
			top: 0.35rem;
		}

		.anchor {
			top: calc(var(--topbar-height-on-mobile) + 0.75rem);
		}

		.sidebox,
		.sidebox:hover,
		.sidebox:active {
			right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.5em);
		}

		.sidebox::before,
		.sidebox::after {
			content: " ";
			position: absolute;
			pointer-events: all;
			right: 0;
		}

		.blockquote,
		[class*="blockquote"],
		blockquote,
		div.blockquote {
			margin: 0;
		}
	}

	@media only screen and (min-width: 48.0625rem) {

		#search-top-box-form input[type="submit"],
		#search-top-box-form input[type="submit"]:focus,
		#search-top-box-form input[type="submit"]:hover {
			border-left: 0.0625rem solid rgba(var(--swatch-primary-darkest), 0);
		}

		#search-top-box-form input[type="submit"] {
			background: rgba(var(--swatch-primary-darkest), 0.5);
		}
	}
}