body
{
	font-family:Inter,"Trebuchet MS",sans-serif;
	background:#242424 url(images/background.jpeg) no-repeat fixed center bottom;
	background-size: cover;
	color:#eee;
}
div.main
{
	padding:150px 150px 0px 270px;
	line-height: 1.8;
	font-size: 1rem;
	max-width: 800px;
	margin: 0px auto;
}
div.sidebarparent
{
	position:fixed;
	top: 0px;
	left: calc( ( 100% - 1914px ) / 2 );
	padding-left: 158px;
	padding-top: 38px;
}
div.sidebarparent img
{	
	position:absolute;
	z-index:1;
}
div.sidebar
{
	position:relative;
	background:url(/images/sidebar.png) center;
	text-align:center;
	width:185px;
	height:400px;
	background-size: 15px;
	padding: 200px 20px 20px 20px;
	margin: 162px 0px 0px 42px;
	border: 2px solid #ccc;	
    -webkit-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    -moz-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    box-shadow: inset 0 0 20px #000, 0 0 20px #000;
}
div.sidebar a, div.enter a
{
	font-family:"Oxanium",sans-serif;
	font-size:1.2em;
	font-weight:600;
	text-decoration:none;
	background:none;
	color:#eee;
	width:100%;
	text-align:center;
	display:inline-block;
	padding: 8px 0px;
}
div.sidebar a:hover, div.enter a:hover
{
	background:radial-gradient(#247ad9a0 0%, rgba(0,0,0,0) 75%);
	color:#ccebff;
}
div.sidebar a.bottom
{
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 185px;
}
div.mobileheader
{
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 64px;
	background:url(/images/sidebar.png) center;
	background-size: 15px;
    -webkit-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    -moz-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    box-shadow: inset 0 0 20px #000, 0 0 20px #000;
	border-bottom: 2px solid #ccc;
	text-align: center;
	line-height: 64px;
	font-family:"Oxanium",sans-serif;
	font-size:1.75em;
	font-weight:600;
}
div.mobileheader a
{
	position: absolute;
	right: 10px;
}
div.linkbox
{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	align-items: center;
}
div.linkbox a, button, a.factionbox, div.linkboxle a
{
	text-decoration:none;
	background:#247ad940;
	color:#eee;
	text-align:center;
	display:inline-block;
	padding:5px 0px 10px 0px;
	margin:10px 5px;
	border: 0px;
}
div.linkbox a:hover, button:hover, a.factionbox:hover, div.linkboxle a:hover
{
	background:#247ad97f;
	color:#ccebff;
}
div.linkboxdownloads
{
	grid-template-columns: 1.5fr 1fr 1fr;
}
div.linkboxle
{
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
div.linkboxdownloads a, div.linkboxle a
{
	font-family: "Oxanium",sans-serif;
	font-weight: 600;
	line-height: 32px;
	padding-top: 10px;
}
div.enterparent
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
}
div.enter
{
	background:url(/images/sidebar.png) center;
	background-size: 15px;
	border: 2px solid #ccc;	
    -webkit-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    -moz-box-shadow: inset 0 0 20px #000, 0 0 20px #000;
    box-shadow: inset 0 0 20px #000, 0 0 20px #000;
	padding:20px;
	width:800px;
	max-width:100%;
	text-decoration:none;
	display:inline-block;
	line-height: 85px;
	font-size: 2rem;
	box-sizing: border-box;
}
div.listbox img
{
	float: left;
	padding: 0px 20px 20px 0px;
}
div.listbox h2
{
	margin-top: 0px;
	text-align: center;
}
div.screenshotbox
{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	text-align: center;
	align-items: center;
}
div.screenshottwinbox
{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	text-align: center;
	align-items: center;
}
div.downloadlist
{
	display:grid;
	grid-template-columns: 64px 3fr 1fr;
	grid-gap: 10px;
	align-items: center;
	background: #0004;
	padding: 20px;
	font-family:"Oxanium",sans-serif;
	font-size:1.25rem;
	font-weight:600;
}
div.downloadlist a
{
	text-align: right;
	padding-right: 20px;
}
div.factions
{
	text-align: center;
}
div.factionheader
{
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}
div.factionportrait
{
	font-size: 0.7em;
	text-align: center;
}
div.factionportrait img
{
	max-width: none;
	display: block;
}
div.factionquotebox
{
	display: flex;
	background: url(images/quote1.png) no-repeat, url(images/quote2.png) right bottom no-repeat;
	align-items: center;
}
div.factionquote
{
	padding: 20px;
}
div.factionquotetagline
{
	float: right;
	padding-right: 40px;
	font-size: 0.9em;
}
div.factiondetails em, div.techdetails em, div.unitheader em
{
    color: #b5dbf2;
	font-family:"Oxanium",sans-serif;
	font-style: normal;
}
div.factiondetails div
{
	padding-left: 50px;
	font-size: 0.9em;
	display: block;
}
div.factiondetails img, div.techdetails img
{
	vertical-align: middle;
}
div.factiondetails strong img
{
	vertical-align: top;
}
div.factiondetails img.logo
{
	float: right;
	padding: 20px 20px 0px 0px;
}
a.factionbox
{
	width: 140px;
	margin: 5px;
	padding: 5px 5px 15px 5px;
	font-size: 0.7rem;
    vertical-align: middle;
}
a.factionbox:hover
{
	text-decoration:none;
}
a.factionbox img.leader
{
	width: 130px;
}
a.factionbox img.logo
{
	margin-top: 10px;
	width: 80px;
}
a.factionbox h3
{
	font-size: 1.2rem;
	line-height: 1.2rem;
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
}
div.techlogo
{
	min-width: 328px;
	min-height: 398px;
	font-size: 0.7em;
	text-align: center;
}
div.techlogo img
{
	max-width: none;
	margin: 60px auto 0px auto;
	display: block;
}
div.techdetails
{
	display:grid;
	grid-template-columns: 1fr 1fr;
}
div.unitheader
{
	display:grid;
	grid-template-columns: 150px 1fr;
	margin-bottom:20px;
	min-height:215px;
}
div.unitheader img
{
	margin-top:20px;
}
h1
{
	font-family:"Oxanium",sans-serif;
	font-size:2rem;
	font-weight:600;
	text-align: center;
}
h2
{
	font-family:"Oxanium",sans-serif;
	font-size:1.5rem;
	font-weight:600;
}
h3
{
	font-family:"Oxanium",sans-serif;
	margin: 5px 0px;
}
a
{
	color:#27acff;
	text-decoration:none;
}
a:hover
{
	color:#ccebff;
	text-decoration:underline;
}
img
{
	max-width: 100%;
}
hr
{
	border: 1px solid #ccc;
	margin: 0px;
}
br.separator
{
	clear: both;
}
form
{
	display: grid;
	grid-template-columns: 100px auto;
	grid-gap: 10px;
}
input, textarea
{
	background: #0007;
	color: #ccc;
}
button
{
	font-family:"Oxanium",sans-serif;
	font-size:1.25rem;
	font-weight:600;
	padding-top: 10px;
	margin: 0px auto;
	width: 50%;
}
@media screen and (max-height: 800px)
{
	div.main
	{
		padding-top: 50px;
	}
}
@media screen and (max-width: 1914px)
{
	div.sidebarparent
	{
		left:0px;
	}
}
@media screen and (max-width: 1700px)
{
	div.sidebarparent
	{
		padding-left: 80px;
	}
}
@media screen and (max-width: 1500px)
{
	div.sidebarparent
	{
		padding-left: 40px;
	}
}
@media screen and (max-width: 1400px)
{
	div.main
	{
		margin: 0px;
		padding: 150px 20px 0px 350px;
	}
}
@media screen and (max-width: 1000px)
{
	div.listbox img
	{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 0px 0px 20px 0px;
	}
	div.factionheader, div.factionquotebox
	{
		display: block;
	}
	div.factionquotetagline
	{
		padding-left: 40%;
		padding-right: 0px;
		float: none;
	}
	div.factionportrait img, div.techlogo img
	{
		max-width: 100%;
		margin: 0px auto;
	}
	div.factiondetails img.logo
	{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 0px 0px 20px 0px;
	}
	div.techlogo
	{
		min-width: 0px;
		min-height: 255px;
	}
}
@media screen and (max-width: 800px)
{
	div.main
	{
		margin: 64px 0px 0px 0px;
		padding: 10px 20px 20px 20px;
	}
	div.sidebarparent
	{
		position:static;
		margin-top: 100%;
		padding: 20px 0px 0px 0px;
	}
	div.sidebarparent img
	{	
		position:absolute;
		z-index:1;
		left:calc( 50% - 158px );
	}
	div.sidebar
	{
		margin: 162px 20px 20px 20px;
		width: auto;
		height: auto;
	}
	div.sidebar a.bottom
	{
		border-top: 2px solid #ccc;
		position:static;
		width:100%;
	}
	div.mobileheader
	{
		display: block;
	}	
	div.screenshotbox
	{
		grid-template-columns: 1fr;
	}
	a.factionbox
	{
		width: auto;
		padding: 10px 10px 15px 10px;
		font-size: 1rem;
		vertical-align: middle;
	}
	a.factionbox img.leader, a.factionbox img.logo
	{
		width: auto;
	}
	a.factionbox img
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 526px)
{
	div.enter
	{
		line-height: 30px;
	}
}