@font-face {
	font-family: 'pressstart2p';
	src: url('pressstart2p.woff2') format('woff2'), url('pressstart2p.woff') format('woff');
	font-display: fallback;
}

body {
	margin: 0;
	background-color: #c7a655;
	font: 10pt pressstart2p, sans-serif;
	color: #51200f;
}


/* HEADER */
/* To config background image and animation, check the respective header.css files */

header {
	height: 480px;
	text-align: center;
	opacity: .75;
	box-shadow: 0 0 15px 15px #a37d39;
	z-index: 1;
}

body > img { /* Logo placement */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 120px auto;
	max-width: 96%;
	z-index: 2;
}

/* NAVICON */

#navicon-checkbox {
	display: none;
}

#navicon {
	position: fixed;
	cursor: pointer;
	z-index: 4;
	top: 12px;
	right: 12px;
}

@keyframes blink {
	0%,19%,40%,59%,80%,99% { visibility: hidden; }
	20%,39%,60%,79%,100% { visibility: visible; }
}

input[type=checkbox]:checked ~ #navicon {
	animation: blink 300ms 1;    
}


/* NAV */

nav {
	display: none;
	position: fixed;
	background-color: #deca5c;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 3;
	text-align: center;
	font-size: 12pt;
	overflow: auto;
}

nav ul {
	text-align: left;
	list-style: none;
	padding-left: 1em;
}

nav > ul {
	display: inline-block;
	margin: 4em auto;
	margin-top: 4em;
	text-transform: uppercase;
}

nav li a {
	text-decoration: none;
	color: #51200f;
	height: 38px;
	display: table-cell;
	vertical-align: middle;

}

nav li li a {
	color: #744d3f;
	padding-left: 40px;
	background-repeat: no-repeat;
	background-position: center left; 
	text-transform: none;
}

input[type=checkbox]:checked ~ nav {
	display: block;    
}


/* GAME ICONS @ NAV */

nav a[href*="boxx4"] { background-image: url("icons/games/boxx4.gif"); }
nav a[href*="freds-journey"] { background-image: url("icons/games/freds-journey.gif"); }
nav a[href*="fruity"] { background-image: url("icons/games/fruity.gif"); }
nav a[href*="gianas-return"] { background-image: url("icons/games/gianas-return.gif"); }
nav a[href*="hermes"] { background-image: url("icons/games/hermes.gif"); }
nav a[href*="sqrxz/"] { background-image: url("icons/games/sqrxz.gif"); }
nav a[href*="sqrxz2"] { background-image: url("icons/games/sqrxz2.gif"); }
nav a[href*="sqrxz3"] { background-image: url("icons/games/sqrxz3.gif"); }
nav a[href*="sqrxz4"] { background-image: url("icons/games/sqrxz4.gif"); }
nav a[href*="super-nutmeg"] { background-image: url("icons/games/super-nutmeg.gif"); }
nav a[href*="star-blader"] { background-image: url("icons/games/star-blader.gif"); }
nav a[href*="trap-runner"] { background-image: url("icons/games/trap-runner.gif"); }
nav a[href*="xump/"] { background-image: url("icons/games/xump.gif"); }
nav a[href*="xump2"] { background-image: url("icons/games/xump2.gif"); }


/* HEADINGS, MAIN & COMMON STYLES */

h1 {
	text-align: center;
	color: #cdab47;
	text-shadow: 4px 0px 0 #51200f, -4px 0px 0 #51200f, 0px 4px 0 #51200f, 0px -4px 0 #51200f, 4px 4px 0 #51200f, -4px -4px 0 #51200f;
	font-size: 22pt;
	font-weight: inherit;
	margin: 1.5em .8em;
}

h2, h3 {
	font-size: inherit;
	font-weight: inherit;
	text-transform: uppercase;
	clear: both;
}

h2 {
	background-color: #51200f;
	color: #c7a655;
	letter-spacing: .5em;
	padding: 1em 1em 1em 2em;
	display: inline-block;
	margin-top: 2em;
}

h3 {
	border-bottom: 2px dashed;
	padding: 1em 0 .5em;
}

main {
	display: block;
	margin: auto;
	max-width: 1000px;
	padding: 0 1em;
	line-height: 1.2em;
}

main li {
	padding-bottom: .6em;
	padding-left: .3em;
}

em {
	color: #744d3f;
	font-style: normal;
}


/* TABLE */

table {
	margin: 1em auto;
	border-spacing: 0;
}

td {
	padding: .5em;
	border-bottom: 1px rgba(255,255,255,.4) solid;
}

thead td {
	padding: 1em .5em;
	text-transform: uppercase;
}

thead, tbody tr:hover {
	background-color: rgba(255,255,255,.2);
}


/* FOOTER */

footer {
	margin-top: 4em;
	text-align: center;
	opacity: .5;
}

footer:hover {
	opacity: 1;
}


/* SPECIAL STYLE */

#staff > img {
	display: block;
	margin: 1em auto 1em;
	transition: transform 200ms ease;
}

#staff > img:hover {
	transform: scale(2);
}

.screenshots img {
	display: block;
	margin: 1em auto;
	max-width: 75%;
}

#youtube, #bandcamp {
	display: block;
	margin: auto;
	width: 80%;
	height: 43.9vw;
	max-height: 450px;
	border: 2px #51200f solid;
}

#bandcamp {
	max-width: 700px;
	min-height: 315px;
}


/* - - - RESPONSIVE - - - */

@media (orientation: landscape) {
	
	body {
		cursor: url(normal.cur), crosshair;
	}

	h1, h2, h3, p, td, li {
		cursor: url(text.cur), crosshair;
	}

	a {
		cursor: url(link.cur), crosshair;
	}

	body {
		font-size: 12pt;
	}

	header {
		box-shadow: none;
	}

	#navicon {
		display: none;
	}

	nav, input[type=checkbox]:checked ~ nav {
		display: block;
		position: absolute;
		top: 480px;
		height: auto;
		overflow:  visible; /* old browser support */
		box-shadow: 0 15px 15px 0 #a37d39;
	}

	.sticky, #navicon-checkbox[type=checkbox]:checked ~ .sticky {
		position: fixed;
		top: 0;
	} 

	nav ul {
		padding: 0;
		margin: 0;
		font-size: 20pt;
	}

	nav ul li {
		display: inline-block;
	}

	nav > ul > li > a {
		padding: .5em 1em;
	}

	nav > ul > li > ul  {
		display: none;
	}

	nav > ul > li:hover > ul, #games:hover ul {
		display: block;
		position: absolute;
		padding: .5em;
		margin-left: -1em;
		font-size: 12pt;
		background-color: #deca5c;
		box-shadow: 0 15px 15px 0 #a37d39;
	}

	nav > ul > li > ul > li  {
		display: block;
	}

	h1 {
		font-size: 36pt;
		text-shadow: 6px 0px 0 #51200f, -6px 0px 0 #51200f, 0px 6px 0 #51200f, 0px -6px 0 #51200f, 6px 6px 0 #51200f, -6px -6px 0 #51200f;
		margin-top: 3.5em;
	}

	h2 {
		letter-spacing: 1em;
	}

	#staff > img {
		float: left;
		margin: 0 1em 0 0;
	}

	.screenshots {
		text-align: center;
	}

	.screenshots img {
		display: inline-block;
		max-width: 46%;
	}
}


@media (orientation: landscape) AND (max-width: 1200px) {
	nav > ul > li > a {
		padding: .5em .5em;
	}
}

@media (orientation: landscape) AND (max-width: 1000px) {
	nav ul {
		font-size: 12pt;
	}
}