/* CSS Rules */

@font-face
{
	font-family: 'kasFont';
	src: url('kasFont.woff') format('woff'),
		 url('kasFont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* Globals */

html
{
	box-sizing: border-box;
}

*, *::before, *::after
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root
{
	--WhiteWarm: rgb(250,245,232);
	--WhiteWarmShadow: rgb(228,224,212);
	--LightGreyWarm: rgb(180,170,160);
	--GreyWarm: rgb(120,110,100);
	--DarkGreyWarm: rgb(70,65,60);
	--BlackWarm: rgb(20,18,15);
	--BlackWarmAlpha: rgba(20,18,15,0.3);
	
	--WhiteGold: rgb(255,250,245);
	--LightGold: rgb(225,205,165);
	--Gold: rgb(175,155,105);
	--DeepGold: rgb(125,105,60);
	
	--WhiteBlue: rgb(245,250,255);
	--LightBlue: rgb(140,215,255);
	--StrongBlue: rgb(20,140,255);
	--DeepBlue: rgb(30,95,125);
	--DarkBlue: rgb(0,45,65);
	
	--NeutralGrey: rgb(120,118,116);
}

/* Layout */

body
{
	background-color: var(--BlackWarm);
	position: relative;
	min-height: 100vmin;
}

div#container
{
	min-height: 100vh;
	padding-bottom: 2rem;
	max-width: 2358px;
	background-color: var(--NeutralGrey);
	margin: auto;
}

section
{
	display: block;
	
	width: 68%;
	min-width: 600px;
	margin: 1em auto;
	padding: 10px 40px 20px 40px;
	border-radius: 20px;
	
	text-align: center;
	
	background-color: var(--WhiteWarm);	
	background: linear-gradient(var(--WhiteWarm) 70%, var(--WhiteWarmShadow) 100%);
	
	border: 2px solid var(--LightGold);
	box-shadow: 0 0 8px var(--GreyWarm) inset, 0 0 12px 4px var(--DarkGreyWarm);
}

section#header, section#footer
{
	display: block;
	
	width: 100%;
	min-width: 800px;
	margin: 0;
	padding: 0;
	
	border: none;
	box-shadow: none;
	background: none;
}

section#header
{
	background-image: url('Top Panel BG.png');
	background-repeat: no-repeat;
	height: 320px;
	/* background-attachment: fixed; */
	background-position: center top;
	background-size: 2358px 320px;
	position: relative;
	padding-top: 220px;
	margin-bottom: 160px;
}

section#header img
{
	height: 120px;
	width: 120px;
	border: 2px solid var(--WhiteGold);
	border-radius: 10px;
	box-shadow: 0 0 8px var(--GreyWarm) inset, 0 0 12px 4px var(--DarkGreyWarm);
	margin-bottom: 0.5em;
}

section#footer
{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 2rem;
}

splitter
{
	display: block;
	height: 1px;
	width: 100%;
	margin: 1.2em auto;
	background-color: var(--LightGreyWarm);
}

/* Text */

h1
{	
	font-family: "Lora", serif;
	font-size: 1.9em;
	line-height: 150%;
	margin: auto;
	text-align: center;
	
	color: var(--WhiteGold);
	text-shadow: 0 0 2px var(--BlackWarm), 0 0 8px var(--Gold), 0 0 12px var(--DeepGold);
}

h1::after
{
	content: "";
	display: block;
	background-color: var(--WhiteBlue);

	height: 1px;
	margin: 0 auto 0.7em auto;
	
	box-shadow: 0 0 0 0.6px var(--DeepGold), 0 0 12px 1px var(--Gold);
}

h2
{
	display: block;
	font-family: "Lora", serif;
	font-size: 1.7em;
	line-height: 140%;
	margin-bottom: 0.2em;
	
	color: var(--WhiteBlue);
	text-shadow: 0 0 3px var(--BlackWarm), 0 0 6px var(--LightBlue), 0 0 8px var(--StrongBlue);
}

#header h2
{
	font-family: "kasFont", "Lato", sans-serif; 
	font-size: 5.2em;
	line-height: 70%;
	margin-bottom: 0;
	
	color: var(--WhiteGold);
	text-shadow: 0 0 2px var(--BlackWarm), 0 0 8px var(--Gold), 0 0 12px var(--DeepGold);
}

h3
{
	display: block;
	font-family: "Lato", sans-serif;
	font-size: 1.2em;
	line-height: 140%;
	margin-bottom: 0.2em;
	
	color: var(--DarkGreyWarm);
	text-shadow: 0 0 2px var(--LightGreyWarm);
}

p, a
{
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	font-style: normal;
	width: 100%;
	line-height: 130%;
	margin-bottom: 0.5em;
	
	color: var(--BlackWarm);
	text-shadow: 0 0 4px var(--LightGreyWarm);
}

.smaller, .small_link
{
	font-size: 0.7em;
}

.small_link
{
	font-size: 0.5em;
}

#header p, #footer p
{
	text-shadow: 0 0 4px var(--DarkGreyWarm);
}

#header p span
{	
	color: var(--LightBlue);
	text-shadow: 0 0 4px var(--DeepBlue);	
}

#footer p span, #header .gold
{	
	color: var(--LightGold);
	text-shadow: 0 0 4px var(--DeepGold);	
}

a, a:visited
{
	font-size: 2.2em;
	
	color: var(--WhiteBlue);
	text-shadow: 0 0 2px var(--DarkBlue), 0 0 4px var(--DeepBlue), 0 0 16px var(--StrongBlue);
}

a:hover, a:active
{
	color: var(--WhiteGold);
	text-shadow: 0 0 4px var(--DeepGold), 0 0 4px var(--Gold), 0 0 8px var(--LightGold);
	transition: all 0.5s;
}