@import url("https://use.typekit.net/cjg4ysl.css");

@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: "The-Foundation-theme";
		/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
		--theme-name: "The Foundation Theme";
		/* set this to your theme's full name */
		--body-font: "franklin-gothic-urw", sans-serif;
		--header-font: "titling-gothic-fb-compressed", sans-serif;
		--title-font: "hypatia-sans-pro", sans-serif;

		--header-title: "The Foundation";

		--light-gray-monochrome: 200, 0, 5;

		--header-gradient-color-bottom: var(--dark-accent);
		--header-gradient-color-middle: var(--black-monochrome);
		--header-gradient-color-top: var(--black-monochrome);

		--background-gradient-color: var(--light-gray-monochrome);
		--swatch-topmenu-border-color: var(--black-monochrome);
		--swatch-topmenu-bg-color: var(--dark-accent);

		--gradient-topmenu: linear-gradient(to bottom,
				rgba(255, 255, 255, 0) 0,
				rgba(255, 255, 255, 0) var(--header-height-on-desktop),
				rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
				rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
				rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
				rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
				rgba(var(--swatch-topmenu-border-color), 0) 100%);

		--gradient-topmenu-mobile: linear-gradient(to bottom,
				rgba(var(--swatch-topmenu-border-color), 1) 0,
				rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
				rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
				rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
				rgba(var(--swatch-topmenu-border-color), 0) 3rem);

		--gradient-header: linear-gradient(to bottom,
				rgb(var(--header-gradient-color-bottom)) 0%,
				rgb(var(--header-gradient-color-middle)) 90%,
				rgb(var(--header-gradient-color-top)) 100%);

		--header-background-image-size: 100% var(--header-height-on-desktop);
		--header-height-on-desktop: 12.25rem;
		--header-height-on-mobile: 12.25rem;
		--topbar-height-on-mobile: 2.5rem;

		--header-h1-font-size: calc(var(--base-font-size) * 7);
		--max-font-size: 0.9375rem;
	}

	#top-bar {
		--mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
	}

	html,
	body {
		font-feature-settings: "onum"0;
		font-variant-numeric: tabular-nums;
	}

	body {
		--wght: 400;
		background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
		font-weight: 400;
	}

	#header h1 {
		text-transform: uppercase;
		letter-spacing: 0.2em;
	}

	#header h2 {
		display: none;
	}

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

	#main-content {
		flex-basis: 100%;
	}

	#page-title,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		--wght: 900;
		color: rgba(var(--light-gray-monochrome));
		font-family: var(--title-font);
		font-weight: 900;
	}

	hr {
		position: relative;
		height: 0.5em;
		overflow: hidden;
		border: initial;
		background-color: rgba(0, 0, 0, 0);
	}

	hr::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-attachment: fixed;
		background-image: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Fcons_circle.png');
		background-repeat: repeat;
		background-position: top center;
		background-size: 100vh;
		pointer-events: none;
		-webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
		clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
	}

	#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
		margin: -0.15em;
		padding: 0.15em;
		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);
		box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
		color: rgb(var(--gray-monochrome));
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

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

	#extra-div-3 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--header-height-on-desktop);
		background: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-header-img.png');
		background-position: center center;
		pointer-events: none;
	}

	#header::before {
		content: none;
	}

	#login-status .printuser {
		--wght: 900;
		color: rgb(var(--swatch-text-light));
		font-weight: 900 !important;
	}

	#top-bar div.top-bar>ul>li,
	#top-bar div.mobile-top-bar>ul>li {
		--wght: 800;
		font-family: var(--title-font);
		font-weight: 800;
		text-transform: uppercase;
		isolation: isolate;
	}

	#top-bar div.top-bar>ul>li::before,
	#top-bar div.mobile-top-bar>ul>li>a::before {
		content: " ";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition:
			opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
			background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
			background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		-webkit-animation-direction: reverse;
		animation-direction: reverse;
		opacity: 0;
		background:
			url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-circles-bg.png');
		background-attachment: fixed;
		background-position: center center;
		background-size: 100vh;
		pointer-events: none;
		pointer-events: none;
	}

	#top-bar div.top-bar>ul>li:hover::before,
	#top-bar div.mobile-top-bar>ul>li>a:hover::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	#top-bar div.top-bar>ul>li>a::before,
	#top-bar div.top-bar>ul>li>a::after {
		z-index: 1;
		background-color: rgba(var(--dark-gray-monochrome));
		pointer-events: none;
	}

	#interwiki {
		background-color: transparent;
	}

	#side-bar {
		--swatch-border-color: rgb(var(--light-gray-monochrome));
		z-index: 10;
		top: 0;
		background-image:
			linear-gradient(to bottom,
				rgba(var(--swatch-menubg-dark-color), 1) 0%,
				rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
			url("/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Fcons_circle.png");
		transition:
			background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
			background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
			padding 300ms linear,
			margin 300ms linear,
			transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
		background-repeat: no-repeat, no-repeat;
		background-position:
			-2.5rem center,
			calc(-100% + var(--sidebar-width-on-desktop)) center;
		background-size:
			cover,
			125vh;
		background-blend-mode:
			multiply,
			normal;
	}

	#side-bar:hover,
	#side-bar:active {
		background-color: rgb(var(--swatch-menubg-dark-color));
		background-position: center center, center center;
	}

	#side-bar:focus-within {
		background-color: rgb(var(--swatch-menubg-dark-color));
		background-position: center center, center center;
	}

	@media only screen and (max-width:56.25rem) {
		#side-bar:target {
			background-color: rgb(var(--swatch-menubg-dark-color));
			background-position: center center, center center;
		}
	}

	#interwiki .heading,
	#side-bar .heading {
		position: relative;
		padding-top: 0.15em;
		padding-bottom: 0.25em;
		font-family: var(--title-font);
	}

	#interwiki div.menu-item a,
	#side-bar div.menu-item a,
	#side-bar div.menu-item .text {
		margin: 0.15em 0;
	}

	.yui-navset .yui-nav {
		--wght: 600;
		font-family: var(--title-font);
		font-weight: 600;
	}

	.yui-navset .yui-nav a::before {
		background-color: transparent;
		background-image:
			radial-gradient(closest-side,
				rgba(var(--tabs-bg), 1),
				rgba(var(--tabs-bg), 0)),
			url("/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-circles-bg.png"),
			radial-gradient(closest-side,
				rgba(var(--tabs-bg), 1),
				rgba(var(--tabs-bg), 0));
		background-blend-mode: normal, overlay, normal;
		background-position: center center, center center;
		background-size: 100% 100%, 100vw, 100% 100%;
		pointer-events: none;
	}

	.yui-navset .yui-nav a:hover::before,
	.yui-navset .yui-nav a:active::before {
		background-color: transparent;
		background-image:
			radial-gradient(rgba(var(--tabs-hover-bg), 0),
				rgba(var(--tabs-hover-bg), 1)),
			url("/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-circles-bg.png"),
			radial-gradient(rgba(var(--tabs-hover-bg), 0),
				rgba(var(--tabs-hover-bg), 1));

	}

	.yui-navset .yui-nav .selected a::before,
	.yui-navset .yui-nav .selected:hover a::before,
	.yui-navset .yui-nav .selected:focus a::before,
	.yui-navset .yui-nav .selected:active a::before {
		background-color: transparent;
		background-image:
			radial-gradient(rgba(var(--tabs-selected-bg), 0),
				rgba(var(--tabs-selected-bg), 1)),
			url("/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-circles-bg.png"),
			radial-gradient(rgba(var(--tabs-selected-bg), 0),
				rgba(var(--tabs-selected-bg), 1));
	}

	.yui-navset .yui-nav li a,
	.yui-navset .yui-nav li a em,
	.yui-navset .yui-nav .selected a,
	.yui-navset .yui-nav .selected a em {
		background-color: transparent !important;
	}

	.yui-navset .yui-nav li,
	.yui-navset .yui-nav .selected {
		background-color: rgb(var(--swatch-background));
	}

	table.wiki-content-table {
		border-collapse: collapse;
	}

	table.wiki-content-table th {
		position: relative;
		border-color: rgb(var(--light-gray-monochrome)) !important;
		background-attachment: fixed;
		background-image: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wikidot.com%2Flocal--files%2Ftheme%3Athe-foundation-theme%2Ffoundation-circles-bg.png');
		background-position: top center;
		background-size: 100vh;
		font-family: var(--title-font);
		font-weight: 600;
		text-transform: uppercase;
	}

	@media only screen and (max-width: 56.25rem) {
		#header h1 a {
			text-align: center;
			font-size: 3.5em;
		}

		#top-bar {
			font-size: calc(var(--base-font-size) * 0.8);
		}

		#top-bar>div.mobile-top-bar>div.open-menu {
			font-size: calc(var(--base-font-size) * 0.65);
		}

		#top-bar div.mobile-top-bar>ul>li>a {
			letter-spacing: 0;
		}

		#top-bar>div.top-bar>ul>li:last-of-type>ul,
		#top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
			left: 50%;
		}

		#top-bar div.mobile-top-bar>ul>li>ul>li>a {
			white-space: pre-wrap;
		}

		#main-content {
			margin-top: 2.1em;
		}
	}
}

@-webkit-keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}