/*
   Neon Dystopia Theme
   [2021 Wikidot Theme]
   by JackalRelated
       inspired by Blade Runner (1982)
*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Jost&display=swap');
@import url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Acyberpunk%2Fstylesheet.css');
@import url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Acyberpunk%2Fconnection.css');

:root {
	--theme-base: "black-highlighter";
	--theme-id: "cyberpunk";
	--theme-name: "Neon Dystopia";

	--header-title: "FOUNDATION";
	--header-subtitle: "REMOTE ACCESS DATABASE";

	--body-font: 'Jost', sans-serif;
	--header-font: 'Element', sans-serif;
	--title-font: 'Unicephalon', serif;
	--mono-font: 'Bedstead', monospace;
	--terminal-font: 'Connection II', monospace;
	--display-font: 'Liquid Crystal', sans-serif;
	--dialogue-font: 'SV Basic Manual', sans-serif;
	--UI-font: var(--dialogue-font);

	/* WHITE - GREY */
	--electric-sheep: 230, 255, 255;
	--gaff-black: 1, 1, 1;

	/* BLUE */
	--neon-blue: 15, 227, 229;
	--tears-n-rain: 73, 177, 178;
	--passive-blue: 65, 134, 155;
	--pkd-blaster: 15, 12, 36;
	--lapd-badge: 9, 8, 19;

	--linkalt: 85, 181, 250;
	--linkalt-hl: 0, 145, 250;

	/* GREEN */
	--display-green: 23, 230, 16;
	--display-inter: 0, 145, 9;
	--tyrell-green: 7, 53, 0;
	--display-dark: 1, 18, 6;

	--linkgr-hl: 65, 255, 59;
	--linkgr: 6, 184, 0;

	/* RED */
	--deckard-red: 191, 0, 0;
	--blade-runner: 163, 0, 0;
	--retired-replicant: 77, 22, 25;

	/* THEME ASSIGNMENTS */
	--white-monochrome: var(--lapd-badge);
	--pale-gray-monochrome: var(--display-dark);
	--light-gray-monochrome: var(--retired-replicant);
	--gray-monochrome: var(--gaff-black);
	--dark-gray-monochrome: var(--lapd-badge);
	--black-monochrome: var(--electric-sheep);
	--pale-accent: var(--tears-n-rain);
	--bright-accent: var(--deckard-red);
	--medium-accent: var(--blade-runner);
	--dark-accent: var(--retired-replicant);

	--swatch-topmenu-bg-color: var(--gaff-black);
	--swatch-topmenu-border-color: var(--tyrell-green);

	--swatch-background: var(--lapd-badge);
	--swatch-primary: var(--display-green);
	--swatch-primary-darker: var(--tyrell-green);
	--swatch-primary-darkest: var(--display-dark);
	--swatch-border-color: 0, 0, 0, 0;

	--swatch-text-dark: var(--gaff-black);
	--swatch-text-light: var(--electric-sheep);
	--swatch-text-general: var(--swatch-text-light);
	--swatch-important-text: var(--bright-accent);

	--swatch-menubg-color: var(--display-dark);
	--swatch-menubg-light-color: var(--);
	--swatch-menubg-medium-color: var(--tyrell-green);
	--swatch-menubg-medium-dark-color: var(--gaff-black);
	--swatch-menubg-dark-color: var(--);

	--swatch-menutxt-light-color: var(--electric-sheep);
	--swatch-menutxt-dark-color: var(--gaff-black);
	--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);

	--swatch-text-secondary-color: var(--gaff-black);
	--swatch-text-tertiary-color: var(--electric-sheep);

	--header-gradient-color-top: var(--gaff-black);
	--header-gradient-color-middle: var(--gaff-black);
	--header-gradient-color-bottom: var(--gaff-black);
	--background-gradient-distance: 0rem;
	--diagonal-stripes: linear-gradient(transparent 0);

	--sidebar-transition-timing: 0.8s ease-in-out 0.1s;

	--hover-link-color: var(--neon-blue);
	--newpage-color: var(--neon-blue);
	--link-color: var(--tears-n-rain);
	--visited-link-color: var(--tears-n-rain);

	--rating-module-bg-color: var(--lapd-badge);
	--rating-module-button-cancel-color: var(--neon-blue);
	--rating-module-bottom-border-color: var(--neon-blue);

	--toggle-button-bg: rgba(var(--gaff-black), 1);
	--toggle-border-color: rgb(var(--tyrell-green));
	--toggle-icon-color: rgb(var(--display-green));
	--toggle-roundness: 0%;
}


/* HEADER AND TOPBAR */

.page-rate-widget-box .rate-points {
	font-size: 1em;
	border: none !important;
	background-color: rgba(0, 0, 0, 0) !important;
	line-height: calc(var(--rating-module-height)*1.25);
}

#page-title {
	color: rgb(var(--neon-blue));
	border-bottom: .0625rem solid rgb(var(--neon-blue));
}

#page-title:after,
.meta-title:after {
	height: 0;
}

#header {
	--swatch-headerh1-color: var(--deckard-red);
	--swatch-headerh2-color: var(--deckard-red);

	--search-icon-color: var(--display-green);
	--search-icon-hover-color: var(--gaff-black);
	--search-icon-hover-bg-color: var(--display-green);
	--search-textbox-text-color: 0, 0, 0, 0;

	--search-icon-focus-color: var(--display-green);
	--search-icon-focus-bg-color: var(--display-green);
	--search-focus-outline-color: var(--display-green);
	--search-focus-textbox-bg-color: var(--display-green);
	--search-focus-textbox-text-color: var(--gaff-black);

	--login-line-divider-color: var(--display-inter);
	--login-username-color: var(--display-green);
	--login-myaccount-color: var(--display-green);
	--login-myaccount-underline-color: var(--display-inter);
	--login-myaccount-hover-color: var(--gaff-black);
	--login-myaccount-hover-bg-color: var(--display-green);
	--login-arrow-color: var(--display-green);

	--login-dropdown-bg-color: var(--display-dark);
	--login-dropdown-bg-image: var(--display-dark);
	--login-dropdown-border-color: var(--display-green), 0.5;
	--login-dropdown-text-color: var(--display-inter);
	--login-dropdown-text-hover-color: var(--display-green);
	--login-dropdown-bg-hover-color: var(--display-dark);

	--login-mobile-icon-color: var(--display-green);
	--login-mobile-icon-hover-color: var(--gaff-black);
	--login-mobile-icon-hover-bg-color: var(--display-green);

	background-image: none;
}

#header h1 {
	width: 100%;
	height: var(--header-height-on-desktop);
	z-index: -9999;
}

#header h1 a {
	text-shadow: none;
	height: 100%;
	width: 100%;
	color: transparent;
	background-image: url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Acyberpunk%2Ffoundation-text.png);
	margin: 0;
	padding: 0;
	background-size: auto calc(var(--header-height-on-desktop) - 1rem);
	background-repeat: no-repeat;
	background-position: left center;
}

@media only screen and (max-width: 768px) {
	#header h1 a {
		background-size: auto calc(var(--header-height-on-desktop) - 3rem);
		background-position: center center;
	}
}

#header h1 a::before {
	text-shadow: none;
	color: transparent;
}

#header h2 {
	display: none;
}

#extra-div-1 {
	height: var(--header-height-on-desktop);
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	background-image: url(/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Acyberpunk%2Fgrid.png);
	background-size: calc(var(--header-height-on-desktop) * 4);
}

#top-bar {
	--topmenu-category-color: var(--display-inter);
	--topmenu-category-hover-color: var(--display-green);
	--topmenu-hover-border-color: var(--display-green);

	--mobile-topmenu-sidebar-button-color: var(--display-green);

	--dropdown-bg-color: var(--display-dark), 0.9;
	--dropdown-border-color: var(--display-green), 0.5;
	--dropdown-links-color: var(--display-inter);
	--dropdown-links-hover-color: var(--display-green);
	--dropdown-links-hover-bg-color: var(--intentionaltypo);
}


/* BREADCRUMBS */

#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
	color: rgb(var(--neon-blue));
	text-decoration: none;
}

/* SCROLLBAR AND SIDEBAR */

html,
body {
	scrollbar-color:
		rgb(var(--tyrell-green)) rgb(var(--display-dark));
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width: 18px;
	background: #transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
	background: rgb(var(--display-dark));
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
	background: rgb(var(--tyrell-green));
	border: rgb(var(--tyrell-green)) 1px solid;
	border-radius: 0px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
	background: rgb(var(--display-green));
}

#side-bar,
#interwiki {
	--sidebar-bg-color: var(--display-dark);
	--sidebar-resources-bg-color: var(--tyrell-green), 0.25;
	--sidebar-media-bg-color: var(---tyrell-green), 0.25;

	--sideblock-heading-border-color: var(--display-green);
	--sideblock-heading-text-color: var(--display-green);

	--sidebar-border-color: var(--swatch-border-color), 0.08;
	--sidebar-subtest-color: var(--swatch-primary);

	--sidebar-links-text: var(--display-inter);
	--sidebar-links-hover-bg-color: var(--display-green);
	--sidebar-links-hover-text-color: var(--gaff-black);
}

hr {
	background-color: rgb(var(--neon-blue));
	border-top: .0625rem solid rgb(var(--neon-blue));
}

.code {
	background-color: rgb(var(--scissor-blades));
}

blockquote,
div.blockquote {
	border: .0625rem dashed rgba(var(--display-green), 1);
	color: rgb(var(--display-green));
}

blockquote hr,
div.blockquote hr {
	background-color: rgb(var(--display-green));
	border-top: .0625rem solid rgb(var(--display-green));
}

.code {
	background-color: rgb(var(--electric-sheep));
}

.scp-image-block {
	box-shadow: none;
	border: none;
}

.scp-image-block .scp-image-caption {
	border-top: .0625rem outset rgba(var(--display-green), 1);
	background-color: rgb(var(--display-dark));
	color: rgb(var(--display-green));
}


/* MAIN CONTENT */

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
	-webkit-filter: hue-rotate(0deg);
	filter: hue-rotate(0deg);
}

#main-content {
	--tabs-bg: var(--pkd-blaster);
	--tabs-txt: var(--tears-n-rain);
	--tabs-hover-bg: var(--neon-blue);
	--tabs-hover-txt: var(--pkd-blaster);
	--tabs-selected-bg: var(--neon-blue);
	--tabs-selected-txt: var(--lapd-badge);
	--tabs-selected-outline: var(--neon-blue);
	--tabs-bottom-border-color: var(--neon-blue);

	--tabs-content-bg-color: var(--pkd-blaster), 0.25;
	--tabs-content-border-color: var(--neon-blue);

	--tables-header-bg: var(--pkd-blaster);
	--tables-header-txt: var(--tears-n-rain);
	--tables-border: var(--neon-blue);
	--tables-body-txt: var(--passive-blue);
	--tables-body-bg: var(--pkd-blaster), 0.50;

	--toc-directory-lines-color: var(--neon-blue);
	--toc-header-bg-color: var(--passive-blue);
	--toc-header-text-color: var(--lapd-badge);
	--toc-header-text-hover-color: var(--neon-blue);
	--toc-body-bg-color: var(--pkd-blaster);
	--toc-body-link-color: var(--tears-n-rain);
	--toc-body-link-hover-color: var(--neon-blue);
	--toc-body-hover-arrow-color: var(--neon-blue);

	--ui-icon-color: var(--display-inter);
	--ui-icon-bg: var(--display-dark);
	--ui-icon-hover-color: var(--display-green);
	--ui-icon-hover-bg: var(--tyrell-green);

	--blockquote-bg-color: var(--display-dark), 0.5;
	--blockquote-colorbar-color: var(--display-green), 1;

	--footnotes-footer-colorbar-color: var(--tears-n-rain);
	--footnotes-footer-title-bg-color: var(--tears-n-rain);
	--footnotes-footer-title-text-color: var(--lapd-badge);
	--footnotes-footer-bg-color: var(--pkd-blaster);

	--pagetags-title-bg: var(--neon-blue);
	--pagetags-title-text: var(--lapd-badge);
	--pagetags-text-color: var(--display-inter);
	--pagetags-text-hover-color: var(--gaff-black);
	--pagetags-text-hover-bg-color: var(--display-green);
}

table.wiki-content-table th {
	font-family: var(--display-font);
}

:root {
	--hoverblock-header-bg: var(--neon-blue);
	--hoverblock-header-txt: var(--lapd-badge);
	--hoverblock-footer-txt: var(--electric-sheep);
	--hoverblock-bg: var(--pkd-blaster);

	--ui-button-bg: var(--display-dark);
	--ui-button-txt: var(--display-inter);
	--ui-button-hover-bg: var(--tyrell-green);
	--ui-button-hover-outline: var(--display-green);
	--ui-button-hover-txt: var(--display-green);

	--modal-bg: var(--display-dark);
	--modal-body-text: var(--display-green);
	--modal-body-header-txt: var(--blade-runner);
	--modal-header-bg: var(--blade-runner);
	--modal-header-stripe: var(--deckard-red);
	--modal-header-txt: var(--display-dark);
}

/* FOOTERS AND BELOW */

.page-source {
	background: rgb(var(--electric-sheep));
	font-family: var(--mono-font);
	color: rgb(var(--gaff-black));
}

.content-panel {
	--box-shadow-3: rgb(var(--neon-blue, 170, 170, 170));
}

.hl-default, .hl-code, .hl-brackets { color: black; }

#lock-info,
div.note,
input.checkbox,
input.text,
textarea {
	font-family: var(--body-font);
}

#footer {
	--footer-bg-color: var(--display-inter);
	--footer-text-color: var(--gaff-black);
	--footer-link-color: var(--gaff-black);
	--footer-link-hover-color: var(--gaff-black);
	--footer-link-hover-bg-color: var(--display-green);
}

#license-area {
	--license-bg-color: var(--lapd-badge);
	--license-text-color: var(--display-inter);
	--license-link-color: var(--display-green);
	--license-link-hover-color: var(--gaff-black);
	--license-link-hover-bg-color: var(--display-green);
}

/* TOGGLE SIDEBAR (BHL) CHANGES */

@supports(display: grid) {
	@media only screen and (min-width: 769px) {
		#main-content::before {
			background: rgba(var(--display-dark), .55) 1px 1px repeat;
		}
	}
}

/* SPECIAL DIVS */

.console {
	padding: 5px 5px 5px 5px;
	margin-bottom: 10px;
	width: 97.7%;
	font-family: var(--terminal-font);
	font-size: 1.1em;
	background-color: rgb(var(--display-dark));
	border: 3px dashed rgb(var(--display-green));
	color: rgb(var(--display-inter));
}

.console hr,
.console-header hr {
	background: linear-gradient(10deg, rgba(var(--display-green), 0.25) 0%, rgba(var(--display-green), 1) 50%, rgba(var(--display-green), 0.25) 100%);
	border-top: none;
}

.console-header {
	font-family: var(--header-font);
	text-align: center;
	color: rgb(var(--display-green));
}

table.terminal {
	border-collapse: collapse;
}

table.terminal th {
	font-weight: bold;
	border: none;
	padding: 0em 0em 0 0;
}

table.terminal td {
	padding: 0em 0 0 1em;
}

.console,
table.terminal,
.console-header,
blockquote,
div.blockquote {
	--hover-link-color: var(--linkgr-hl);
	--newpage-color: var(--display-green);
	--link-color: var(--display-green);
	--visited-link-color: var(--linkgr);
}

.logs {
	padding: 5px 5px 5px 5px;
	margin-bottom: 10px;
	width: 97.7%;
	font-family: var(--display-font);
	font-size: 1.1em;
	background-color: rgb(var(--lapd-badge));
	border: 3px solid rgb(var(--neon-blue));
	color: rgb(var(--passive-blue));
}

.logs-header {
	text-align: center;
	color: rgb(var(--neon-blue));
}

.logs hr {
	background: linear-gradient(10deg, rgba(var(--neon-blue), 0.25) 0%, rgba(var(--neon-blue), 1) 50%, rgba(var(--neon-blue), 0.25) 100%);
}

table.dialog {
	border-collapse: collapse;
}

table.dialog th {
	font-family: var(--display-font);
	font-size: 1.1em;
	border-right: 1px solid rgb(var(--neon-blue));
	color: rgb(var(--neon-blue));
	padding: 1.1em 1em 0em 1em;
}

table.dialog td {
	font-family: var(--dialogue-font);
	font-size: 1.15em;
	padding: 1.15em 0em 0em 0.8em;
}

table.dialog td.active {
	color: rgb(var(--neon-blue));
}

.blokquote-alt,
.logs {
	--hover-link-color: var(--linkalt-hl);
	--newpage-color: var(--linkalt);
	--link-color: var(--linkalt);
	--visited-link-color: var(--tears-n-rain);
}

.blokquote-alt {
	margin: .5em 1.25rem;
	padding: .825em 1.25em;
	border: .0625rem dashed rgba(var(--neon-blue), 1);
	color: rgb(var(--neon-blue));
	background-color: rgba(var(--pkd-blaster), 0.7);
}

.blokquote-alt hr {
	background-color: rgb(var(--neon-blue));
	border-top: .0625rem solid rgb(var(--neon-blue));
}

/* SIDEBAR SCROLLBAR */

#side-bar:hover,
#side-bar:active {
	scrollbar-color:
		rgb(var(--display-dark)) rgb(var(--tyrell-green), 1);
	border-color: rgba(var(--tyrell-green), 1);
}

#side-bar::-webkit-scrollbar-track,
#side-bar:hover::-webkit-scrollbar-track {
	background-color: rgb(var(--display-dark));
}

#side-bar::-webkit-scrollbar-thumb {
	background-color: rgb(var(--tyrell-green));
}

#side-bar:hover::-webkit-scrollbar-thumb {
	background-color: rgb(var(--display-green));
}

/* END */