@charset "UTF-8";

.blackhole {
	display: none;
}

/* SITE NAVIGATION */
nav ul {
	list-style-type: table;
	position: absolute;
	top: 53%;
	left: 22%;
	/*transform: translate(5%, -10%);*/
	width: 52%;
}
nav li {
	display: inline-block;
	vertical-align: text-bottom;
	line-height: 26px;
	height: 196px;
}
nav ul li {
	position: relative;
	box-sizing: border-box;
	/*border-right: .2em solid #fcc116;*/
	width: 19%;
	text-align: center;
	font-size: .9em;
	font-family: Arial, "sans-serif";
	/*float: left;*/
	height: 50px;
	top: 70px;
	left: 200px; /* moves menu text */
	overflow: visible;
	z-index: 15;
	font-weight: bolder;
}
.navbar a, .navbar a:visited {
	color: var(--blue);
}
.navbar a:hover {
	background-color: var(--goldltlt);
	color: var(--rust);
}
nav ul li a {
	text-decoration: none;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: bottom;
	font-weight: 600;
	color: var(--blue);
	text-align: center;
	text-shadow: 1px 2px 3px #fff, -2px -1px 3px #fff, -3px 2px 2px #fff, 3px -2px 2px #fff;
}

.overlay {
	height: 0%;
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.75);
	overflow-y: hidden;
	transition: 0.5s;
}
.overlay-content {
	position: relative;
	top: 25%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
}
.overlay a {
	padding: 8px;
	text-decoration: none;
	font-size: 36px;
	color: var(--rust);
	display: block;
	transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
	color: var(--goldltlt);
}
.overlay .closebtn {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 60px;
}

/* MESSY PAINT SPLATS/HEADER */
.paint {
	height: 160px;
	margin-top: -50px;
	z-index: 0;
}
.paint-h {
	background-image: url(../images/header/paints-tr_h.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	/*transform: translateX(-200px);*/
	height: 160px;
	z-index: 10;
	display: inline-block;
	position: absolute;
	top: -60px;
	left: -30px;
	width: 475px;
	height: 196px;
}
.paint-d {
	background-image: url(../images/header/paints-tr_dc.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	/*transform: translateX(200px);*/
	height: 160px;
	z-index: 10;
	display: inline-block;
	position: absolute;
	top: -67px;
	left: 493px;
	width: 475px;
	height: 196px;
}
.paint-c {
	background-image: url(../images/header/paints-tr_dc.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	/*transform: translateX(200px);*/
	height: 160px;
	z-index: 10;
	display: inline-block;
	position: absolute;
	top: -60px;
	left: 930px;
	width: 475px;
	height: 196px;
}
.paint-m {
	background-image: url(../images/header/paints-tr_m.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	/*transform: translateX(200px);*/
	height: 160px;
	z-index: 10;
	display: inline-block;
	position: absolute;
	top: -64px;
	left: 711px;
	width: 475px;
	height: 196px;
}
.paint-rr {
	background-image: url(../images/header/paints-tr_rr.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	/*transform: translateX(200px);*/
	height: 160px;
	z-index: 10;
	display: inline-block;
	position: absolute;
	top: -51px;
	left: 401px;
	width: 475px;
	height: 196px;
}

.fauxsig { z-index: 20; }

@media screen and (max-height: 450px) {
	.overlay {overflow-y: auto;}
	.overlay a {font-size: 20px}
	.overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}

/* BLACK HOLE */
@media screen and (min-width: 50px) and (max-width: 300px) {
	.blackhole { 
		background: var(--black);
		color: var(--white);
		display: block; 
		position: absolute;
		width: 100vw;
		height: 100vh;
		text-align: center;
		font-size: 1.25em;
	}
	.universe { display: none; }
}

/* MOBILE */
@media screen and (min-width: 301px) and (max-width: 499px) {

}

/* TABLET */
@media screen and (min-width: 500px) and (max-width:750px) {
	nav ul {
		list-style-type: table;
		position: absolute;
		top: 56%;
		left: 3%;
		font-size: .75em;
		/*transform: translate(5%, -10%);*/
		width: 53%;
	}
	.paint-h {
		top: -82px;
		left: -36px;
	}
	.paint-rr {
		top: -82px;
		left: 64px;
	}
	.paint-d {
		top: -82px;
		left: 191px;
	}
	.paint-m {	
		top: -82px;
		left: 233px;
	}
	.paint-c {
		top: -82px;
		left: 346px;
	}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
	nav ul {
		list-style-type: table;
		position: absolute;
		top: 56%;
		left: 8%;
		/*transform: translate(5%, -10%);*/
		width: 60%;
	 }
	.paint-h {
		top: -77px;
		left: -48px;
	}
	.paint-rr {
		top: -76px;
		left: 98px;
	}
	.paint-d {
		top: -76px;
		left: 258px;
	}
	.paint-m {
		top: -76px;
		left: 366.5px;
	}
	.paint-c {
		top: -76px;
		left: 454px;
	}
}

/* DESKTOP */
@media screen and (min-width: 1001px) {
	.paint-h {
		top: -74px;
		left: -137px;
	}
	.paint-rr {
		top: -58px;
		left: 258px;
	}
	.paint-d {
		top: -58px;
		left: 364px;
	}
	.paint-m {
		top: -58px;
		left: 487px;
	}
	.paint-c {
		top: -58px;
		left: 667px;
	}
}