/* FLEXBOX */

/* HEADER STYLES YAAAAY */

header {width: 100%;}

#headerImages {display: flex;}
header img {width: 100%; height: 100%;}
.headerimg {flex: 33%;}

#dragonLeft {padding: 0 0 15% 50%; margin-left: 5%;}
#at {padding-top: 10%;}
#dragonRight {padding: 0 50% 15% 0; margin-left: -5%;}


/* BODY STYLES */
h1 {
	margin: auto;
	text-align: center;
}

main {
	float: left;
	width: 75%;
}
#homeLeft {
	background-color: rgba(0, 255, 255, 0.7);
	width: 80%;
	margin: auto;
	border-radius: 30px;
	border: 10px double black;
	padding: 2% 5%;
}

#neocityStuff {
	
}

#homeRight {
	float: right;
	width: 25%;
}

footer {
	
}


	/* GENERATED CONTENT - SUBJECT TO CHANGE */
#generateMe {width: 100%;}

/* PSEUDO HEADER */

#pseudoHeader {width: 100%;}
#pseudoHeader img {width: 100%; height: auto;}
#phContent {
	display: grid;
	grid-template-columns: 15% 70% 15%;
	grid-template-areas: "left middle right";
}
.left {grid-area: left; place-self: center end;}
.middle {grid-area: middle; place-self: center;}
.right {grid-area: right; place-self: center start;}

/* BODY */

p:first-of-type {text-indent: 2em;}
#pseudoBody ul {width: 50%; float: left; clear: none;}
.thumbnail {width: 40%; float: right; clear: none; margin-bottom: 50px;}


/* NAV */

nav ul {
	list-style-type: none;
	background-color: rgba(255, 0, 255, 0.8);
	color: #F0FFFF;
	position: fixed;
	bottom: 0;
	width: 100%;
	margin: 0;
}
nav ul li { float: left; }
nav ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 0 20em 0 20em ;
}
nav ul li a:hover:not(.active) {
	background-color: #111;
}

nav ul li a.active {
	background-color: #04AA6D;
}