.scanlines {

	overflow: hidden;
	position: relative;

}
.scanlines:before,
.scanlines:after {
	
	display: block;
	pointer-events: none;
	content: "";
	position: absolute;

}

/* Heavy scanline that scrolls up the page */
.scanlines:before {

	width: 100%;
	height: 2px;
	z-index: 2147483649;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0.50;
	animation: scanline 6s linear infinite;

}

/* Scanlines per line*/
.scanlines:after
{

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483648;
	background: linear-gradient(

		to bottom,			/* Gradient start position */
		transparent 50%,		/* Stop 1 */
		rgba(0, 0, 0, 0.1875) 50%		/* Stop 2 */

	);
	background-size: 100% 4px;
	animation: scanlines 1s steps(60) infinite;

}

@font-face 
{
	font-family: "Maple Mono";
	src: url("../ttf/MapleMono-Medium.ttf") format("truetype");
	src: url("../ttf/MapleMono-Italic.ttf") format("truetype");
}



/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline
{

	0% {

		transform: translate3d(0, 200000%, 0);

	}

}
@keyframes scanlines
{
	0% {

		background-position: 0 50%;

	}

}

@media (prefers-reduced-motion: reduce)
{

	.scanlines::before,
	.scanlines::after
	{

		animation: none;
		background: none;

	}
	
}

.noCollapse
{
	padding: 0.05px !important;
}

/*
div {
	margin: 0;
	padding: 0;
}
div.scanlines {
	position: absolute;
}
div .jpg {
	width: 100vw;
	height: 100vh;
	border: none;
}
.jpg {
	background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Philips_PM5544.svg/800px-Philips_PM5544.svg.png")
		no-repeat;
	background-size: cover;
}
body {
	position: relative;
	background: #1b1b1b;
}*/

/* 
	Topnav Behaviour: https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/ 
	(includes a lot of unnecessary gumf, only the below 5 classes are actually needed)
*/

.menu /* Styling: Drawer layout */
{
	display: flex;
	justify-content: center;
	max-width: 960px;
	width:100%;
	list-style-type: none;
	font-size:1.25em;
}

.menu li /* Styling: Drawer heading */
{
	position: relative;
	font-size: 1em;
	cursor: grab;
	margin-left:0.5em;
	margin-right:0.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	color:#00ffff;

}

.menu ul /* Styling: Drawer contents */
{
	list-style-type: none;
	display: none;
	position: absolute;
	left:0%;
	top:100%;
	border-color:var(--color-body-text);
	border-style:double;
	border-width:3px;
	background-color: var(--color-ana-1);
	background-image: url("../img/skulls.png");
	white-space: nowrap; /* forces child nodes to expand the width of the drawer to accommodate them without forcing line breaks */
	z-index:3;
}

.menu li:hover > ul /* Behaviour: Pops out the drawers */
{
	display: block;
}

/* Behaviour: Should fix borking in Safari/iPhone (Modern browser support only) */
.menu li:focus-within > ul 
{
	display: block;
}

.modal
{
	position: absolute;
	z-index: 999;
	background-color: #000;
}

.footerblock
{
	font-size:smaller;
	padding:1em;
}

.max600
{
	display: none;
}

.min600
{
	display: none;
}

.min768
{
	display: none;
}

.min992
{
	display: none;
}

.min1200
{
	display: none;
}

/* Typical Device Breakpoints */

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 
{
	.max600 { display: block; }
	.min600 { display: none;}
	.min768 { display: none;}
	.min992 { display: none;}
	.min1200 {display: none;}

	.navcol 
	{
		display: none;
		visibility: hidden;
	}

	.contentwrapper
	{
		width:100% !important;
		float:unset !important;
	}

	.root
	{
		width:100% !important;
	}

	.menu
	{
		flex-direction: column;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) 
{
	.max600 { display: none; }
	.min600 { display: block;}
	.min768 { display: none;}
	.min992 { display: none;}
	.min1200 {display: none;}

	

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)
{
	.max600 { display: none; }
	.min600 { display: none;}
	.min768 { display: block;}
	.min992 { display: none;}
	.min1200 {display: none;}

	.root 
	{
		width:75% !important;
	}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)
{
	.max600 { display: none; }
	.min600 { display: none;}
	.min768 { display: none;}
	.min992 { display: block;}
	.min1200 {display: none;}

	.root 
	{
		width:75% !important;
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) 
{
	.max600 { display: none; }
	.min600 { display: none;}
	.min768 { display: none;}
	.min992 { display: none;}
	.min1200 {display: block;}

	.root 
	{
		width:50% !important;
	}

}

.root:before 
{

	-webkit-box-shadow: 15px 0 15px -15px var(--color-body-text) inset;
	-moz-box-shadow: 15px 0 15px -15px var(--color-body-text) inset;
	box-shadow: 15px 0 15px -15px var(--color-body-text) inset;
	content: " ";
	height: 100%;
	left: 0px;
	position: absolute;
	top: 0;
	width: 15px;
	z-index: 1;

}

.root:after 
{

	-webkit-box-shadow: -15px 0 15px -15px var(--color-body-text) inset;
	-moz-box-shadow: -15px 0 15px -15px var(--color-body-text) inset;
	box-shadow: -15px 0 15px -15px var(--color-body-text) inset;
	content: " ";
	height: 100%;
	right: 0px;
	position: absolute;
	top: 0;
	width: 15px;
	z-index: 1;

}

.root
{
	
	z-index: 0;
	width: 50%;
	margin: 0 auto;
	margin-top: 0px !important;
	border-left-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	border-color: var(--color-ana-5);
	background-color: var(--color-ana-1);
	min-height: 100vh;
	text-shadow: none;
	position: relative;

}

.hcentre
{

	text-align: center;

}

.vcentre
{

	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

}

.banner
{

	color: var(--color-ana-4);
	overflow: hidden;
	height:auto;
	
}

.bannerheading
{
	
	font-size:3.5em;
	font-weight: 900;
	font-style: oblique;
	line-height:1em;

	text-shadow:
	-3px -3px 0 var(--color-body-text),
	3px -3px 0 var(--color-body-text),
	-3px 3px 0 var(--color-ana-2),
	3px 3px 0 var(--color-ana-2);

}

.banner:after
{

	content: ""; 
	visibility: hidden; 
	display: block; 
	height: 0; 
	clear: both;

}

.bannerinner
{

	clear: both;
	overflow: auto; /* Stops collapsing margin fuckery */
	overflow: hidden;
	padding-top:32px;
	padding-bottom:32px;

}

.bannertext
{

	margin-left:24px;

}

.bannerheading a,
.bannerheading a:link,
.bannerheading a:active,
.bannerheading a:hover,
.bannerheading a:visited 
{

	color: #a5ff06;
	text-decoration: none;
	text-shadow:
	-3px -3px 0 #456d00,
	3px -3px 0 #456d00,
	-3px 3px 0 #456d00,
	3px 3px 0 #456d00;

}

.bannersubtext
{

	font-size:1.5em;
	font-weight: 500;
	font-style: italic !important;
	line-height:1.5em;
	color: #fff;
	padding:none;
	margin-top:0.5em;
	margin-bottom:0.5em;

	text-shadow:
	-1px -1px 0 var(--color-body-text),
	1px -1px 0 var(--color-body-text),
	-1px 1px 0 var(--color-body-text),
	1px 1px 0 var(--color-body-text); 

}

.bannercontrols
{
	padding-left:24px;
	padding-right:24px;
}

.search 
{
	color: var(--color-body-text);
	background-color: #000;
	font-size:1.25em;
	border-color: var(--color-body-text);
	border-width:3px;
	border-style:double;
	width:100%;
	padding:.25em;
	font-style:italic;
	font-synthesis: none;
}

.topnav
{

	width:100%;
	height:auto;
	margin-bottom:1em;
	background: linear-gradient(var(--color-body-text),var(--color-ana-4));
	z-index: 2;
	position: relative;
	box-shadow: 0 15px 15px -15px #000;
	padding-top:.25em;
	padding-bottom:.25em;

}

.clearfix 
{

	zoom: 0;

}

.clearfix:before,
.clearfix:after
{

	content: '';
	display: table;

}

.clearfix:after
{

	clear: both;

}

.navcol
{

	float:left; 
	width:25%;
	padding-left:1%;
	padding-right:1%;
	border: 0px solid #fff;
	
}

.contentwrapper
{
	margin-top:0px;
	float:right;
	width:75%;
	padding-left:1%;
	padding-right:1%;
	border: 0px solid #fff;

}

.contentwrapper p
{

	line-height: 1.5em;

}

.ideabox
{
	border-radius:5px;
	border-color:var(--color-ana-3);
	border-width:1px;
	border-style:solid;
	margin-bottom:0px;
}

.navbox 
{
	border-radius:5px;
	border-color:var(--color-ana-3);
	border-width:1px;
	border-style:solid;
	margin-bottom:1em;
}

.navsectionheading, .ideatitle
{

	padding: 4px;
	padding-left:0.25em;
	background: linear-gradient(var(--color-ana-4),var(--color-body-text));
	color: #000;
	font-weight:500;
	font-size: 1.25em;
	vertical-align: middle;
	border-left-width:4px;
	border-left-style:solid;
	border-left-color:#00ff00;
	max-height: 32px;
	text-transform:capitalize;

}

.ideatitle:first-letter .navsectionlinks a:first-letter
{

	text-transform: uppercase;

}

.navsectionlinks, .ideabody
{

	padding: 4px;
	padding-left:0.5em;
	background: var(--color-ana-2);
	color: var(--color-body-text);

}

.navsectionlinks a
{

	text-transform:capitalize;

}

.heading
{

	padding: 4px;
	padding-left:8px;
	color:#fff;
	background: linear-gradient(#222222,#141414);
	font-size:1.25em;
	border-left-width:4px;
	border-left-style:solid;
	border-left-color:#a5ff06;
	margin-bottom:0.25em;

}

.tabcontainer
{
	
	padding: 4px;
	padding-left:2em;
	margin-bottom:1em;

}

.tab
{

	font-size:1.25em;	
	font-style: oblique;
	border-left-width:4px;
	border-left-style:solid;
	border-left-color:#a5ff06;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top: 4px;
	padding-bottom: 3px;
	margin-right:0.5em;
	background: linear-gradient(#222222,#141414) !important;
	text-decoration: none !important;
	color:#fff !important; 

}

.activetab
{

	background: linear-gradient(#456d00,#76b900) !important;
	text-decoration: none !important;
	color: #fff !important;

}

.monospaced
{

	font-family: "Noto Sans","Courier New", monospace;
	font-weight:bold;

}

.listitem
{
	margin-bottom:0.0em;
	margin-top:2.5px;
	margin-bottom:2.5px;
	margin-left:1.5em;
	margin-right:8px;
	text-shadow: 0px 0px 1.25px #ff3f7f;
	list-style-position: outside;
	display:list-item;
}

.blockquote
{

	border-left-width:4px;
	border-left-style:solid;
	border-left-color:#00ffff;
	border-bottom: 1px solid #000;
	margin-left:8px;
	margin-right:8px;
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color: var(--color-ana-3);
	color:var(--color-body-text);

}

.notice
{
	padding:8px;
	text-shadow: 0px 0px 1.25px #ff3f7f;
}

.warning
{
	border-left-color:#ff7f00;
	padding:8px;
	text-shadow: 0px 0px 1.25px #ff3f7f;

}

.blockicon
{
	width:28px;
	float:left;
}

.blockbody
{
	width:96%;
	margin-left:28px;
}

.blockquote-privacy-hint
{
	float: left;
	width: 5%;
}

.yt-privacy-hint
{
	float: right;
	width:95%;
}

.vembed 
{

	text-align: center;
	max-width: 100%;
  	min-height: 360px;

}

.vembed p
{

	text-align: left;

}

.bold
{

	font-weight: bold;

}

.emph
{

	font-synthesis: none;
	font-style:	italic;
	line-height: 1.5em;
	
}

.subtleemph
{

	font-style: oblique;
	font-weight: bold;
	margin-right:2.5px;

}

.subheading
{

	color:#fff;
	font-weight:bold;

}

.sub
{
	font-size:0.75em;
	line-height:1em;
	padding-left:8px;
}

.inactive
{

	text-decoration: none;

}

.imgfleft
{

	float:left;
	margin-right:1em;

}

.hidden
{

	display: none;
	visibility: hidden;
	opacity:0%;

}

.under
{

	text-decoration: underline;

}

.strike
{

	text-decoration: line-through;

}

.divider
{

	background-color: #181818;
	min-height:1px;

}

/*	
	Blur may be computationally expensive BUT;
	A: It does not depend on JavaScript to append or remove CSS classes
	B: It is non-destructive
*/

.spoiler
{

	filter:blur(5px);

}

.spoiler:hover 
{

	filter:blur(0px);

}

.mono 
{

	font-family: "Maple Mono","Noto Sans Mono", monospace;

}

.cmd
{
	line-height: 1.5em;
}

.cmd, .pseudocode, .swatch
{

	font-family: "Maple Mono","Noto Sans Mono", monospace;
	font-synthesis: none;
	font-style:	italic;
	background-color: var(--color-ana-3);
	margin-top:2.5px;
	margin-bottom:2.5px;
	color: var(--color-ana-6);
	border: 1px solid var(--color-ana-4);
	border-radius:5px;
	font-size:0.9em;

}

.cmd, .swatch
{

	padding-left:.5em;
	padding:.1rem;

}

.cmd span, .swatch span 
{

	margin-left:5px;
	margin-right:5px;

}

.cmd button, .swatch button 
{

	position:relative;
	margin-right:.25em;
	background-color: var(--color-ana-4);
	font-size:16px;

}

.label
{

	font-family: "Noto Sans", "Rubik", "Open Sans", "Verdana", "Arial", "Helvetica", "Bitstream", Sans-serif;
	font-style: normal;

}

.pseudocode button
{

	background-color: transparent;
	font-family: "Noto Sans" sans-serif;
	background-color: var(--color-ana-4);
	color: #ffff00;
	border: 3px outset var(--color-body-text);
	margin: 0.5em;
	padding:0.5em;
	font-size:16px;
	border-radius:5px;
	
}

.cmd button:hover, 
.swatch button:hover, 
.pseudocode button:hover
{

	cursor:pointer;
	
}

.pseudocode
{

	padding:0.25rem;
	line-height:1.5em;
	margin-left:8px;
	margin-right:8px;

}

.pseudocode p
{

	line-height:1.5em;
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;

}

.pseudo-line-no
{
	
	float: left;
	width: 5%;

}

.pseudo-snippet
{

	float: right;
	width:95%;

}

#wrapper
{
	counter-reset: line-number;
}

.pseudocode p 
{

	counter-increment: line-number;

}

.pseudocode p:before 
{

	content: counter(line-number)": ";
	color:#7f7f7f;

}

.colinfo
{
	margin-top:2.5px;
	margin-bottom:2.5px;
	margin-left:0.5em;
}

.colinfo svg
{
	vertical-align: sub;
	border: 1px solid #fff;
	width: 16px;
	height: 16px;
}

.caption, .image
{
	text-align: center;
	padding:8px;
}

.t-comm
{
	color: #7f7f7f;
}

.t-string
{
	color: #ff7f00;
}

.t-int
{
	color: #ffff00;
}

.t-bool 
{
	color: #00ffff;
}

.t-var
{
	color:var(--color-body-text);
}

.t-key
{
	color:#007fff;
}

.t-func
{
	color:#ff00ff;
}