html {height: 100%}

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

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

nav {background-color: #4A86E8; width: 23%; float: right; clear: right; text-align: center; overflow: auto; min-height: 100%; padding: 1%; overflow-x: hidden;}
	nav h1 {line-height: 30px; font-size: 37px;}
	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 {background-color: #1C4587; overflow: auto; clear: left; scrollbar-color: #16376c #16376c; overflow-x: hidden;}
		section div h2 {font-variant: small-caps; font-size: 14pt;}
		section div p {font-size: 10pt;}
		section div img {width: 50px; margin-bottom: 0px;}
	section a {color: #000000; text-decoration: none;}
	
		section section h1 {text-align: center; font-size: 40px; line-height: 7px; margin-bottom: 2px;}
		section section span {font-variant: small-caps; font-weight: bolder;}
		
		.tileArea {height: calc(100vh - 130px);}
		
		.platformSelection {height: 120px; width: 95%; clear: both; margin: auto;}
			.platformButton {width: 100px; height: 100px; margin-left: 25px; margin-right: 25px; float: left; border-radius: 15px;}
			.platformButtonImg {width: 50px; height: 50px; margin: 5px;}
		
		.navMain {height: 10%;}
		.navScroll {overflow: auto; width: 100%; height: calc(100vh - 130px - 250px); padding: 1%; overflow-x: hidden;}			
		
		.indexGroup {border-radius: 15px; background-color: #3D85C6; margin: 10px; overflow: visible;}
			.indexGroupHeading {margin-bottom: 20px;}
			.indexGroupDoubleHeading {margin-bottom: 40px;}
		
		.new {width: 360px; height: 550px; float: left;}
			
		.featured {width: 480px; height: 550px; float: right; clear: right;}
		
		.gbagames {width: 715px; height: 550px; float: left; clear: none;}
		
		.emulatorgames {width: 960px; height: 550px; float: left; margin-left: 10px;}

		.beatmaps {width: 360px; height: 600px; float: right;}
		
		.installTile {background-color: #9FC5E8; width: 93px; height: 214px; border-radius: 20px; float: left; margin: 10px; text-align: center; padding: 3px;}
			.installTile:hover {border: solid #ffffff 3px; width: 93px; height: 214px; padding: 0px}
			.platformIcon {height: 15px; width: 15px; clear: both;}
			.platformIconBg {background-color: #9FC5E8; width: 15px; height: 15px; translate: 60px -15px; padding: 5px; border-radius: 100%; margin-bottom: -20px;}
			
		.x2installTile {background-color: #9FC5E8; width: 212px; height: 208px; border-radius: 20px; float: left; margin: 10px; text-align: center; padding: 3px;}
			.x2installTile:hover {border: solid #ffffff 3px; width: 212px; height: 208px; padding: 0px;}
			.x2platformIcon {height: 15px; width: 15px; clear: both;}
			.x2platformIconBg {background-color: #9FC5E8; width: 15px; height: 15px; translate: 123px -60px; padding: 5px; border-radius: 100%;}
			
			
		/* 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;} */
		
		/* Hide Nav Scrollbar */
			.navScroll::-webkit-scrollbar {display: none;}
			.navScroll {-ms-overflow-style: none; scrollbar-width: none}
		
		@keyframes tileHover {
			to {translate: 0px -5px;}
			from {translate: 0px 0px;}
		}
		
		@keyframes platformButtonHover {
			to {translate: 0px -5px;}
			from {translate: 0px 0px;}
		}
		
		@keyframes platformButtonHover {
			to {translate: 0px -5px;}
			from {translate: 0px 0px; border: solid #ffffff 3px;}
		}