body { 
	background-color: #333;
	font-family: Trebuchet MS; font-size:16px;
	margin: 0; padding: 0;
	font-size: 16px;
	background: -webkit-linear-gradient(top, #343399, #333) fixed;
}
h1, h2, h3, h4 {
	font-family: 'Voltaire', sans-serif;
	clear: both;
}

h1 {
	padding-top: 3em;
}
	h1.first {
		padding-top: 0;
		width: 80%;
		float: left;
		clear: left;
	}

a {
	color: #343399;
	text-decoration: none;
}
a:hover {
	color: #9B1133;
	text-decoration: underline;
}

#logoHeader {
	text-align: center;
	/* background: #343399; */
	margin: 0; padding: 0;
	/* box-shadow: inset 0 0 80px black; */
	overflow: hidden;
	position: relative;
	animation: animate-fade ease 1s;
	animation-fill-mode: backwards;
}
#logoHeader h1 { display: none; }
#logoHeader img {
	border:0; margin: 0; padding: 0;
	max-width: 100%;
	min-width: 440px;
	/* box-shadow: 0 0 80px black; */
}
.subTitle {
	display: block;
	position: absolute;	
	bottom: 0; left: 0; right: 0;
	margin: 0;
	padding: 0;
	font-size: 150%; 
	font-style: italic;
	color: rgba(255,255,255,0.8);
	text-shadow: 0 0.2em 0.5em black, 1px 2px 0 black;
}		

.bodyContainer {
	width: 60%; margin: 0 auto 1em auto;
	border: solid 20px #ddd;
	background-color: #eee;
	padding: 1em 5% 3em 5%;
	box-shadow: 1px 2px 20px black; ;
	border-radius: 1em;
	font-size: 110%;
	animation-duration: 0.3s;
	animation-name: animate-arrive;
	animation-timing-function: ease;
	animation-delay: 0.15s;
	animation-fill-mode: backwards;
}

.intro {
	padding: 0;
	margin: 0 0 1em 0;
}

ul.socialLinks {
	margin: 0; padding: 0;
	display: block;
	list-style: none;
}
	ul.socialLinks > li {
		width: 31%;
		float: left;
	}
	ul.socialLinks a {
		display: block;
		width: auto;
		padding: 1em; margin: 0.5em 0.5em; 
		border: solid 1px white;
		font-size: larger;
		text-align: center;
		/* letter-spacing: 0.25em; */
		line-height: 1.5em;
		background-color: #ddd;
		border-radius: 0.7em;
		font-family: 'Voltaire', sans-serif;
	}
	ul.socialLinks a:hover {
		background-color: #ccc;
		border-color: #bbb;

	}
.credits {
	width: 50%;
	margin: 9vh auto;
	display: block;
	text-align: center;
	color: white;
}
img.logo {
	float: left;
	width: 3em;
	height: 3em;
	padding: 0 1em 1em 0;
}

/* For modern browsers */
.container:before,
.container:after {
	content:"";
	display:table;
}
.container:after {
	clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
	zoom:1;
}


.gameList {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: space-between;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	animation: animate-fade ease 1.5s;
	animation-fill-mode: backwards;
}
.gameList > li {
	order: 2;
	display: block;
	box-sizing: border-box;
	position: relative;
	width: 48%;
	border-right: solid 2em #eee;
	margin: 3em 0 1em 0;
	background-color: #999;
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 1em rgba(0,0,0,0.25), inset 0 0 3em rgba(0,0,0,0.25);
}
.gameList > li.prototype {
	order: 3;
}
.gameList > li.complete {
	order: 2;
}
.gameList > li.favorite {
	order: 1;
}

	.gameList > li > a {
		display: block;
		min-height: 9em;
		color: black;
		text-decoration: none;
		background-color: rgba(204,204,204,0.15);
		transition: background 0.18s ease-in-out;
	}
		.gameList > li > a:hover {
			background-color: rgba(204,204,204,0.0);
			
		}
			.gameList > li > a:hover > span.gn {
				color: #9B1133;
			}
			.gameList > li > a:hover > span.desc {
				box-shadow: 0.5em 0.5em 1em rgba(0,0,0,0.25);
			}			

		.gameList > li > a > span {
			display: inline-block;
			padding: 0.25em;
			background-color: rgba(255,255,255,0.75);
		}
		.gameList > li > a > span.gn {
			display: block;
			position: absolute; 
			top: -1.65em;
			font-family: 'Voltaire', sans-serif;
			font-size: 140%;
			background-color: transparent; 
			text-shadow: 0.1em 0.1em 0.2em white;
		}
		.gameList > li > a > span.desc {
			position: absolute;
			left: 0.2em;
			top: 0.2em;
			width: 50%;
			border-radius: 0.1em;
			box-shadow: 0.5em 0.5em 1em rgba(0,0,0,0.15);
		}
	.gameList .compo {
		position: absolute;
		bottom: 0.5em;
		left: 0.5em;
		color: #ddd;
		font-size: 70%;
		font-weight: bold;
		text-shadow: 1px 1px 0 black, 0 1px 0 black, 1px 0 0 black,
			-1px -1px 0 black, 0 -1px 0 black, -1px 0 0 black, 
			0 0 0.25em rgba(0,0,0,0.5);
		
	}


.gameList li.sr {	background-image: url('../images/games/skyray_1.png');		}
.gameList li.pf {	background-image: url('../images/games/phantom-fort_1.png');		}
.gameList li.cc {	background-image: url('../images/games/conspiracy-clicker_1.png');		}
.gameList li.pt {	background-image: url('../images/games/pictotel_1.png');		}
.gameList li.tk {	background-image: url('../images/games/tundra-king_1.png');		}
.gameList li.ll {	background-image: url('../images/games/life-loops_1.png');		}
.gameList li.dg {	background-image: url('../images/games/diabolical-genius_1.png');		}
.gameList li.logh {	background-image: url('../images/games/6.gif');		}
.gameList li.sd {	background-image: url('../images/games/stardust_1.png');		}
.gameList li.ccom {	background-image: url('../images/games/cosmiccom_1.png');		}
.gameList li.mh {	background-image: url('../images/games/major-hammer_1.png');		}
.gameList li.tvk { 	background-image: url('../images/games/tavern_king.png'); }
.gameList li.cwg { 	background-image: url('../images/games/cylindrical_world.png'); }
.gameList li.nc { 	background-image: url('../images/games/net_clicker.jpg'); }
.gameList li.cyc { 	background-image: url('../images/games/cyclopean.jpg'); }
.gameList li.pkt { 	background-image: url('../images/games/pocketropolis.png'); }
.gameList li.rp { 	background-image: url('../images/games/rep_prez.png'); }
.gameList li.cbcn { background-image: url('../play-online/cobold-console/images/omicron_screenshot.png'); }
.gameList li.exa { 	background-image: url(''); }
.gameList li.shg {	background-image: url('../images/games/glitch.png'); }
.gameList li.ai { 	background-image: url('../images/games/arcane.png'); }
.gameList li.eb { 	background-image: url('../images/games/exo-bot.png'); }
.gameList li.gg { 	background-image: url('../images/games/galGen.png'); }
.gameList li.civc { 	background-image: url('../images/games/civclicker-v1.3.png'); }

.gameList li.favorite:before {
	content: "\2729  favorite";
	display: block;
	position: absolute;
	top: -2em;
	right: 0;
	background: none;
	color: white;
	padding: 0.2em 1em;
	font-size: 80%;
	background: #9B1133;
	border-radius: 0.5em;
}


/*
.gameList > li:before {
	display: block;
	width: 5em;
	height: 5em;
	background: inherit;
	border: solid 1px red;
}
*/

footer {
	animation: animate-fade ease 1s;
	animation-fill-mode: backwards;
}

.otherLinks {
	clear: both;
	margin-top: 1em;
}
.otherLinks > li {
	margin: 1em 0;
}

@media (max-width: 1300px) {
	.bodyContainer {
		width: 70%;
	}
}

@media (max-width: 1200px) {
	.bodyContainer {
		width: 80%;
	}
}	
@media (max-width: 1000px) {
	.bodyContainer {
		width: 90%;
	}
}
@media (max-width: 900px) {
	.bodyContainer {
		width: 95%;
	}
}			
@media (max-width: 800px) {
	.bodyContainer {
		width: auto;
		border: 0;
		border-radius: 0;
	}
}
@media (max-width: 700px) {
	ul.socialLinks > li {
		width: 100%;
	}
	ul.socialLinks a {
		margin: 0.1em 0em;
		padding: 0.8em 1em;
	}
	span.desc {
		font-size: 70%;
	}
}
/*
@media handheld {
	body > div {
		font-size: 160%;
	}
}
*/

@keyframes animate-fade {
	0% {
		opacity: 0;
		/* transform: scale(0.5); */
	}
	100% {
		opacity: 1;
		/* transform: scale(1); */
	}
}

@keyframes animate-arrive {
	0% {
		opacity: 0;
		transform: scale(0.95);
		max-height: 0;
	}
	100% {
		opacity: 1;
		transform: scale(1);
		max-height: 100%;
	}
}