html {height: 100%;}

body {background-color: #1C4587; height: 100%; overflow: hidden;}

header {background-color: #3C78D8; width: 100%; float: left; clear: left; text-align: center; font-size: 20pt; height: 170px;}
	header a {color: #000000; text-decoration: none;}
	header img {height: 165px;}

nav {background-color: #4A86E8; width: 23%; float: right; clear: right; text-align: center; min-height: 100%;}
	nav h1 {line-height: 72px; font-size: 50px;}
	nav h2 {font-variant: small-caps; font-size: 30px;}
	nav p {font-size: 14pt;}
	nav div img {width: 15%; margin-left: 18px; margin-right: 18px;}

section {overflow: auto; clear: left; scrollbar-color: #16376c #16376c; overflow-x: hidden;}
		section div h2 {font-variant: small-caps;}
		section div img {width: 100px; margin-bottom: 20px;}
	section a {color: #000000; text-decoration: none;}
	
		section section h1 {text-align: center; font-size: 80px; line-height: 10px;}
		section section span {font-variant: small-caps; font-weight: bolder;}
		
		.navMain {height: 15%;}
		.navScroll {overflow: auto; width: 100%; height: calc(100vh - 180px - 300px); padding: 1%; overflow-x: hidden;}
		
		.tileArea {height: calc(100vh - 180px);}
		
		.platformSelection {height: 125px; width: 95%; clear: both; margin: auto;}
			.platformButton {width: 125px; height: 125px; margin-left: 25px; margin-right: 25px; float: left; border-radius: 15px;}
			.platformButtonImg {width: 90px; height: 90px; margin: 18px;}
		
		.indexGroup {border-radius: 20px; background-color: #3D85C6; margin: 50px; overflow: visible;}
			.indexGroupHeading {margin-bottom: 20px; text-align: center; font-size: 30pt;}
			.indexGroupDoubleHeading {margin-bottom: 20px; text-align: center; font-size: 30pt;}
		
		.new {width: 700px; height: 750px; float: left;}
			
		.featured {width: 934px; height: 750px; float: right; clear: right;}
		
		.gbagames {width: 1400px; height: 750px; float: right;}
		
		.emulatorgames {width: 1860px; height: 750px; float: left; margin-left: auto; margin-right: auto;}
		
		.beatmaps {width: 700px; height: 750px; float: right;}
		
		
		.installTile {background-color: #9FC5E8; width: 194px; height: 294px; border-radius: 20px; float: left; margin: 16px; text-align: center; padding: 3px}
			.installTile:hover {border: solid #ffffff 3px; width: 194px; height: 294px; padding: 0px}
			.platformIcon {height: 25px; width: 25px; clear: both;}
			.platformIconBg {background-color: #9FC5E8; width: 25px; height: 25px; translate: 130px -40px; padding: 5px; border-radius: 100%; margin-bottom: -40px;}
			
		.x2installTile {background-color: #9FC5E8; width: 424px; height: 294px; border-radius: 20px; float: left; margin: 16px; text-align: center; padding: 3px;}
			.x2installTile:hover {border: solid #ffffff 3px; width: 424px; height: 294px; padding: 0px}
			.x2platformIcon {height: 25px; width: 25px; clear: both;}
			.x2platformIconBg {background-color: #9FC5E8; width: 25px; height: 25px; translate: 245px -90px; padding: 5px; border-radius: 100%;}
			
		/* Hide Nav Scrollbar */
			.navScroll::-webkit-scrollbar {display: none;}
			.navScroll {-ms-overflow-style: none; scrollbar-width: none}
			
			
		/* Install Tile Animation */
			.installTile:hover {animation-name: tileHover; animation-duration: 0.5s; animation-fill-mode: forwards;}
			.x2installTile:hover {animation-name: tileHover; animation-duration: 0.5s; animation-fill-mode: forwards;}
			/* .platformButton:hover {animation-name: platformButtonHover; animation-duration: 0.5s; animation-fill-mode: forwards; border: solid #ffffff 3px; margin-left: 22px; margin-right: 22px;} */
		
		@keyframes tileHover {
			to {translate: 0px -5px;}
			from {translate: 0px 0px;}
		}
		
		@keyframes platformButtonHover {
			to {translate: 0px -5px;}
			from {translate: 0px 0px;}
		}