:root{
	/*colours*/
	--color-dark:#000;
	--color-bright-text:#62DC00;
	--color-frames:#090;
	--color-highlighter:#cf0;
	/*sizes*/
	--menu-width:227px;
	--menu-margin:calc(var(--menu-width) + 40px);
	--grid-gap:10px;
	/*fonts*/
	--font-simple:monospace
}

/*hidden*/
#filters{height:0;visibility:hidden}
#loading{display:none}
#error-notice-two{
	visibility:hidden;
	font-size:1px;
	position:absolute;
	z-index:-2
}
.stars,
.tip,
.ruler,
#clocker{display:none}

/*IE fix*/
@media only screen and (min-width:700px){
	nav.nav{max-width:230px}
	#contents{margin-left:250px}
}
.error-notice,.js-notice,noscript{
	display:block;
	text-rendering:optimizeLegibility;
	font-family:sans-serif;
	font-variant:small-caps;
	font-weight:bolder;
	letter-spacing:.2em;
	text-align:center;
	color:#900;
	background-color:#cdb;
	background-color:#ddc9;
	border-radius:5px
}
.error-notice{
	line-height:12px;
	font-size:10px
}
.js-notice,
noscript{
	font-size:16px;
	padding:6px
}
table .error-notice,
table .js-notice,
table noscript{
	margin:3px;
	margin-right:-40px
}
.error-notice em{
	text-transform:uppercase;
	font-style:normal;
	text-decoration:underline;
	margin-left:8px
}
@supports (display:grid) and (background:var(--color-dark)){.error-notice{display:none}}

/*global*/
body{
	background-color:#000;
	background-color:var(--color-dark);
	color:#62DC00;
	color:var(--color-bright-text);
	letter-spacing:.5px;
	line-height:1.5em;
	text-align:center;
	font-family:var(--font-simple);
	text-rendering:optimizeLegibility;
	padding:
		env(safe-area-inset-top,0px),
		env(safe-area-inset-right,5px),
		env(safe-area-inset-bottom,20px),
		env(safe-area-inset-left,5px)
}

/*grid outlay*/
#contents{
	display:grid;
	grid-template-areas:
		"topside"
		"main"
		"footer";
	gap:var(--grid-gap)
}
	#reference-grid{grid-area:topside}
	#textarticle{grid-area:main}
	footer{grid-area:footer}
	@media only screen and (min-width:700px){
		#contents{
			margin-left:var(--menu-margin);
			margin-right:calc(var(--menu-margin) - var(--menu-width))
		}
	}
	@media only screen and (max-width:699px){
		#contents{
			max-width:100%;
			margin:0
		}
	}
#reference-grid{display:grid}
	#art-album{grid-area:art}
	#code-album{grid-area:code}
	#internal-links{grid-area:links}
	#switch{grid-area:switch}
	title{
		grid-area:title;
		place-self:center
	}
	@media only screen and (min-width:700px){
		#reference-grid{
			grid-template-areas:
				"art code"
				"switch switch"
				"links links"
				"title title";
			margin-top:calc(0 - var(--grid-gap));
			gap:var(--grid-gap)
		}
		title{margin:30px}
		#internal-links{margin-right:100px}
	}
	@media only screen and (max-width:699px){
		#reference-grid{
			grid-template-areas:
				"title"
				"switch"
				"art"
				"code"
				"links";
			margin:0;padding:0;
			margin-top:calc(0 - var(--grid-gap))
		}
		#switch{margin-bottom:30px}
	}

/*lists*/
ol{
	display:block;
	margin:0;
	margin-left:5%;
	padding:.5cm 0;
	background-size:50px 100%;
	background-repeat:no-repeat;
	background-image:
		linear-gradient(var(--color-dark),transparent 1% 99.5%,var(--color-dark)),
		linear-gradient(90deg,var(--color-dark),transparent 4% 96%,var(--color-dark)),
		repeating-linear-gradient(130deg,transparent 0 3px,#CAD6BAcc 3px 3px,transparent 4px 4px),
		repeating-linear-gradient(110deg,transparent 0 3px,#A6B099cc 3px 3px,transparent 4px 4px),
		repeating-linear-gradient(120deg,transparent 0 1px,#7B8271cc 90px 90px,transparent 200px 200px),
		repeating-linear-gradient(124deg,transparent 0 2px,#50554Acc 97px 97px,transparent 225px 225px),
		linear-gradient(#B4C2A7,transparent),
		linear-gradient(transparent,#B4C2A7);
	background-position:5px 0;
	list-style:none;
	text-align:left
}
ul{
	text-align:left;
	list-style:circle;
	margin:0;
	margin-left:1%
}
	ol li,ul li{
		border-bottom:1px dotted #0f04;
		line-height:.5cm
	}
	ol li{
		margin:calc(.5cm - 2px) 0;
		margin-left:60px;
		text-indent:-60px
	}
	ul li{padding-left:.5cm;line-height:.5cm}
	
/*links*/
a{
	padding:1px 4px;
	margin:0 4px;
	background-color:#8BDC47;
	box-shadow:inset 0 0 0 1px #cf0;
	box-shadow:inset 0 0 0 1px var(--color-highlighter);
	color:#000;
	color:var(--color-dark);
	font-weight:bolder;
	text-decoration:unset;
	transition:.5s
}
	a:visited{
		color:#000;
		color:var(--color-dark);
		background-color:#62dc00;
		background-color:var(--color-bright-text)
	}
	a:hover,
	a:focus{
		background-color:#cf0;
		background-color:var(--color-highlighter);
		transition:.5s
	}

/*menu & footer*/
nav{
	display:block;
	padding:10px;
	background-color:#676;
	background-color:#B4C2A7fe;
	background-image:
		repeating-linear-gradient(130deg,transparent 0 3px,#CAD6BAcc 3px 3px,transparent 4px 4px),
		repeating-linear-gradient(110deg,transparent 0 3px,#A6B099cc 3px 3px,transparent 4px 4px),
		repeating-linear-gradient(120deg,transparent 0 1px,#7B8271cc 90px 90px,transparent 200px 200px),
		repeating-linear-gradient(124deg,transparent 0 2px,#50554Acc 97px 97px,transparent 225px 225px);
	border-radius:4px;
	box-shadow:
		inset 0 0 4px 0 #000,
		0 0 6px 3px #000;
	box-shadow:
		inset 0 0 4px 0 var(--color-dark),
		0 0 6px 3px var(--color-dark);
	text-align:center;
	color:#181A16;
	font-weight:bolder
}
	table.nav-table{
		display:table;
		width:100%
	}
		hr.menu-hr{
			margin-top:14px;
			margin-bottom:14px;
			width:130%;
			border:4px ridge #929B86;
			box-shadow:0 0 8px 6px #7B8271;
			box-shadow:0 0 8px 6px #7B8271dd;
			border-radius:8px
		}
	nav.bottom-nav{line-height:1em}
		nav.bottom-nav p,nav.bottom-nav h3{
			background-clip:content-box;
			background:#ccc;
			background:#ccc4;
			padding:4px;
			border-radius:4px
		}

	@media only screen and (min-width:700px){
		nav.nav{
			position:fixed;
			top:2px;bottom:2px;left:2px;
			width:var(--menu-width)
		}
			table.nav-table td.label{width:90%}
			#scrolly{
				max-height:calc(100% - 200px);
				padding-top:10px;
				padding-bottom:40px;
				overflow-y:auto
				}
	}
	@media only screen and (max-width:699px){
		nav{
			width:auto;
			margin:2px;
			margin-top:-20px;
			min-height:100px
		}
	}

	button{
		cursor:pointer;
		display:block;
		margin:4px;
		width:50px;height:50px;
		background-color:#2B2E28;
		mix-blend-mode:luminosity;
		border-radius:3px;
		border:4px outset #3F453A;
		box-shadow:
			inset 0 0 16px 0 #4F5648,
			0 0 1px 2px #181A16,
			1px 1px 2px 3px #181A16,
			0 0 10px 3px #929B86,
			0 0 8px 10px #7B8271;
		box-shadow:
			inset 0 0 16px 0 #4F5648,
			0 0 1px 2px #181A16,
			1px 1px 2px 3px #181A16,
			0 0 10px 3px #929B86dd,
			0 0 8px 10px #7B8271dd;
		color:#838C79;
		font-variant:small-caps;
		font-weight:bolder;
		font-size:1.6em;
		text-indent:-2px
	}
		button:focus,
		button:hover{
			filter:brightness(1.2) contrast(1.5);
			transition-duration:.5s
		}
		button:active{
			border:4px inset #3F453A;
			transition-duration:.5s
		}
			button.multioption{
				width:30px;height:30px;
				text-indent:-4px;
				font-size:1em
			}
		nav mark{
			display:inline-block;
			margin-right:10px;
			background-color:#FDF4CE;
			border-radius:8px;
			border:3px inset #686F60;
			box-shadow:
				inset 0 0 20px 0 #ADA170,
				0 0 10px 1px #929B86,
				0 0 8px 10px #7B8271;
			box-shadow:
				inset 0 0 20px 0 #ADA170,
				0 0 10px 1px #929B86dd,
				0 0 8px 10px #7B8271dd;
			color:#181A16;
			font-size:16px;
			letter-spacing:2px;
			font-variant:small-caps;
			font-weight:bolder;
			text-shadow:0 0 1px #181A16
		}
			nav mark span{
				display:block;
				margin:auto auto;
				width:100%;height:100%
			}
			#navbar .stretch{
				width:70%;min-height:30px;
				padding:6px 10px
			}
			nav mark.multioption{
				width:90%;
				padding:3px;
				box-shadow:
					inset 0 0 20px 0 #ADA170,
					0 0 10px 1px #929B86,
					0 0 6px 6px #7B8271;
				box-shadow:
					inset 0 0 20px 0 #ADA170,
					0 0 10px 1px #929B86dd,
					0 0 6px 6px #7B8271dd;
				font-size:14px
			}

/*light-switch*/
.mode{
	display:block;
	height:40px;
	color:#fff;
	font-size:20px;
	font-variant:small-caps;
	text-align:right
}
#label-lightswitch{
	color:inherit;
	font-family:inherit;
	font-weight:inherit;
}
.switch{
	display:inline-block;
	position:relative;
	float:right;
	margin-right:10px;
	border-radius:4px;
	box-shadow:
		0 0 2px 1px #736F5E,
		0 0 2px 5px #000,
		0 0 12px 12px #171613;
}
	@media only screen and (min-width:700px){.switch{width:40px;height:80px}}
	@media only screen and (max-width:699px){.switch{width:20px;height:40px}}
.switch input{
	cursor:pointer;
	z-index:6000;
	position:relative;
	width:100%;height:100%;
	opacity:0
}
.slider{
	position:absolute;
	top:0;bottom:0;left:0;right:0;
	background-color:#CCC5A6;
	background-image:linear-gradient(transparent,#A9A38A,transparent);
	background-blend-mode:luminosity;
	border-radius:4px;
	box-shadow:
		inset 0 -4px 2px 0 #736F5E,
		inset 0 4px 2px 0 #736F5E
}
	.slider:before{
		position:absolute;
		left:0px;bottom:0px;
		width:100%;height:49.5%;
		background-color:#A9A38A;
		box-shadow:
			0 0 2px 0 #736F5E,
			inset 0 0 2px 0 #736F5E,
			inset 0 0 4px 1px #908B76;
		border-radius:2px;
		content:" "
	}
		input:checked + .slider:before{transform:translateY(-100%)}
/*skin-awitcher*/
ol label{cursor:pointer}
input#matrix,
input#notes,
input#leather,
input#void,
input#steam,
input#wild{
	cursor:pointer;
	position:relative;
	z-index:7000;
	margin-left:50px;margin-top:-1em;
	width:200%;height:200%;
	border-radius:50%;
	opacity:0
}
.skin{
	display:inline-block;
	position:relative;
	vertical-align:middle;
	margin-left:20px;
	margin-right:15px;
	width:19px;height:19px;
	background-color:#fff;
	border-radius:50%;
	box-shadow:
		-.5px -.5px 1px 0 #5f4,
		inset -.5px -.5px 5px 1px #010,
		0 0 2px 1px #010,
		0 0 1px 4.5px #898,
		.5px .5px 1.5px 5px #000;
	box-shadow:
		-.5px -.5px 1px 0 #5f42,
		inset -.5px -.5px 5px 1px #010c,
		0 0 2px 1px #010d,
		0 0 1px 4.5px #898,
		.5px .5px 1.5px 5px var(--color-dark);
	opacity:.95;
	transition-duration:.5s
}
label:hover .skin,
label:focus .skin,
label:active .skin,
#matrix-ping{
	box-shadow:
		-.5px -.5px 15px 10px #5f4,
		inset -.5px -.5px 5px 1px #5f4,
		0 0 2px 1px #070,
		0 0 1px 4.5px #9a8,
		.5px .5px 1.5px 5px #000;
	box-shadow:
		-.5px -.5px 15px 10px #5f46,
		inset -.5px -.5px 5px 1px #090e,
		0 0 2px 1px #070,
		0 0 1px 4.5px #9a8,
		.5px .5px 1.5px 5px var(--color-dark);
	transition-duration:.5s
}
/*title*/
title{
	display:block;
	margin-top:10px;
	padding:4px;
	letter-spacing:4px
}
	@media only screen and (min-width:700px){title{font-size:30px}}
article{
	display:block;
	margin:10px;
	margin-bottom:30px;
	padding:4px;
	background-color:#000;
	background-color:var(--color-dark);
	background-image:
		repeating-linear-gradient(122deg,transparent 1px,#050B00 2px 2px,transparent 3px 40px,#050B00 41px 41px,transparent 42px 43px),
		repeating-linear-gradient(transparent 1px,#050B00 2px 2px,transparent 3px 7px);
	box-shadow:
		inset 0 0 0 1px #090,
		0 0 0 4px #000,
		0 0 0 5px #090;
	box-shadow:
		inset 0 0 0 1px var(--color-frames),
		0 0 0 4px var(--color-dark),
		0 0 0 5px var(--color-frames)
}
	#internal-links{line-height:.7cm}
	@media only screen and (min-width:700px){#textarticle{margin-top:calc(0 - var(--grid-gap))}}
	@media only screen and (max-width:699px){article{margin:30px 0}}
	
	article hr{
		display:block;
		margin:.48cm auto .47cm;
		width:90%;height:.05cm;
		background-color:#cf0;
		background-color:#00000001;
		background-image:linear-gradient(90deg,var(--color-bright-text),var(--color-frames),var(--color-highlighter));
		border-radius:6px;
		border:none
	}
	title::selection,
	article label::selection,
	article p::selection,
	article u::selection,
	article i::selection,
	article em::selection,
	article b::selection,
	article li::selection,
	article mark::selection,
	article a::selection{
		background-color:#cf0;
		background-color:var(--color-highlighter);
		color:#000;
		color:var(--color-dark);
		font-weight:bolder
	}
	mark{
		padding:2px;
		background-color:#cf0;
		background-color:var(--color-highlighter);
		border-radius:3px;
		opacity:.9
	}
	article h1,
	article h2,
	article h3,
	article h4,
	article h5,
	article h6{
		margin:.43cm;
		color:#3E8900;
		line-height:.5cm;
		text-decoration:underline;
		text-decoration-line:underline;
		text-decoration-style:dotted;
		text-decoration-skip-ink:none;
		text-underline-offset:5px;
		text-decoration-thickness:.4px
	}
	article p{
		margin:.5cm;
		text-indent:-20px
	}
	article p:before{content:"> "}
		@media only screen and (min-width:700px){
			article p{
				margin-left:20px;
				margin-right:2%;
				line-height:.5cm;
				text-align:justify
			}
		}
		@media only screen and (max-width:699px){article p{text-align:left}}
	.album{
		display:flex;
		flex-direction:row;
		overflow-y:auto;
		height:120px;
		background:#ccc2;
		text-align:center
	}
		@media only screen and (min-width:700px){.album{width:calc(50vw - var(--menu-width) + .5cm)}}
		@media only screen and (max-width:699px){.album{width:90vw}}
		.album img{
			display:inline-block;
			margin:4px;
			height:90px
		}
	article img{
		display:inline-block;
		border-radius:3px
	}
/*footer notes*/
#footerFanContentPolicy p{
	font-size:9px;
	line-height:12px
}