* { margin: 0; }

*:focus,:focus {
	outline: 0;
    outline: none;
	}

html, body, div, span, a, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-text-size-adjust: none;
	}

html, body {
	width: 100%;
	height: 100%;
	}

body {
	line-height: 1.5;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #fff;
/*	font-size: 81.25%;*/
/*	overflow: hidden;*/
/*	min-width: 360px;*/
	}
body#coreai {
	font-size: 81.25%;
	overflow: hidden;/* magic to hide rings on thin browser windows */
	min-width: 360px;/* still doesnt stop sidescroll in iphones */
	}
body#sketchbook {
	min-height: 100vh;
	}
	
	body.deep-core {
		background: #464832;
		background: -moz-linear-gradient(-45deg,  #464832 0%, #64644d 50%, #464832 100%);
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#464832), color-stop(50%,#64644d), color-stop(100%,#464832));
		background: -webkit-linear-gradient(-45deg,  #464832 0%,#64644d 50%,#464832 100%);
		background: -o-linear-gradient(-45deg,  #464832 0%,#64644d 50%,#464832 100%);
		background: -ms-linear-gradient(-45deg,  #464832 0%,#64644d 50%,#464832 100%);
		background: linear-gradient(135deg,  #464832 0%,#64644d 50%,#464832 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464832', endColorstr='#464832',GradientType=1 );
		}
	body.nebulous-float {
		-webkit-backface-visibility: hidden;
		background: #625c3b; /* old shit browsers - seriously, fucken upgrade already */
		background: -moz-linear-gradient(-45deg,  rgb(55,40,16) 0%, rgb(156,156,107) 100%);
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgb(55,40,16)), color-stop(100%,rgb(156,156,107)));
		background: -webkit-linear-gradient(-45deg,  rgb(55,40,16) 0%,rgb(156,156,107) 100%);
		background: -o-linear-gradient(-45deg,  rgb(55,40,16) 0%,rgb(156,156,107) 100%);
		background: -ms-linear-gradient(-45deg,  rgb(55,40,16) 0%,rgb(156,156,107) 100%);
		background: linear-gradient(135deg,  rgb(55,40,16) 0%,rgb(156,156,107) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#372810', endColorstr='#9c9c6b',GradientType=1 );
		}
		
canvas {
	display:block;
	vertical-align:bottom;
	}

#particle-field {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

#pulsar-outer {
	display: flex;
	padding: 20px;
	flex-direction: column;
	align-items: center;
	text-align: center;
	}
	#pulsar-inner {
		max-width: 95vw;
		}

#nova-outer {
	display: block;
	position: absolute;
	top: 45%;
	left: 50%;
	width: 1px;
	height: 1px;
	overflow: visible;
	visibility: visible;
	text-align: center;
	}
	#nova-inner {
		display: block;
		visibility: visible;
		top: -250px;
		left: -250px;
		position: relative;
		margin: 0 auto;
		width: 500px;
		height: 500px;
		}
		
		#nebula-ring {
			z-index: 0;
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			margin: 0;
			width: 500px;
			height: 500px;
			text-align: center;
			overflow: hidden;
			-webkit-backface-visibility: hidden;
			}
			#nebula-ring img.ring {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 500px;
				height: 500px;
				}
		
		#blackhole {
			z-index: 10;
			position: absolute;
			top: 0;
			left: 0;
			}
		
		#time-goes-a-loop {
			z-index: 10;
			position: absolute;
			top: 0;
			left: 0;
			}
			#time-goes-a-loop text {
				fill: #35270f;
				color: #35270f;
				}
	
		#gratuitous-linkage {
			z-index: 10;
			position: absolute;
			top: 0;
			left: 0;
			width: 800px;
			height: 500px;
			}
			#gratuitous-linkage a {
				position: absolute;
				font-size: 18px;
				color: #2d2414;
				border-bottom: 1px solid #771100;
				text-decoration: none;
				}
			#gratuitous-linkage a:hover {
				color: #bf7e00;
				border-bottom: 1px solid #fff;
				text-decoration: none;
				}
			#gratuitous-linkage a:nth-child(1) {left: 420px;top: 0px;}
			#gratuitous-linkage a:nth-child(2) {left: 476px;top: 40px;}
			#gratuitous-linkage a:nth-child(3) {left: 510px;top: 80px;}
			#gratuitous-linkage a:nth-child(4) {left: 532px;top: 120px;}
			#gratuitous-linkage a:nth-child(5) {left: 546px;top: 160px;}
			#gratuitous-linkage a:nth-child(6) {left: 553px;top: 200px;}
			#gratuitous-linkage a:nth-child(7) {left: 554px;top: 240px;}
			#gratuitous-linkage a:nth-child(8) {left: 551px;top: 280px;}
			#gratuitous-linkage a:nth-child(9) {left: 541px;top: 320px;}
			#gratuitous-linkage a:nth-child(10) {left: 526px;top: 360px;}
			#gratuitous-linkage a:nth-child(11) {left: 498px;top: 400px;}
			#gratuitous-linkage a:nth-child(12) {left: 468px;top: 440px;}
			
		body.portrait #gratuitous-linkage {
			display: none;
			}

#for-the-bots {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0.1;
	font-size: 1px;
	}

#gratuitous-burger {
	display: none;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

@media (max-width: 768px) {
	#gratuitous-burger {
		z-index: 100;
		display: block;
		}
	#gratuitous-linkage {
		z-index: 101;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: inherit;
		max-width: none;
		margin: 0;
		background: #35270f;
		background: #35270fbd;
		position: fixed;
		top: 0;
		right: 0;
		width: 50%;
		height: 100vh;
		transition: transform 0.4s, opacity 0.4s;
		opacity: 0;
		visibility: hidden;
		}
		#gratuitous-linkage.show {
			opacity: 1;
			visibility: visible;
			}
		#gratuitous-linkage a {
			position: relative;
			top: initial !important; left: initial !important;
			margin-bottom: 5px;
			border-bottom-color: transparent;
			font-size: 22px;
			color: #dad7bf;
			white-space: nowrap;
			}
}