/* ======================== */
/* FONT DEFINITIONS         */
/* ======================== */

@font-face {
	font-weight:normal;
	src:url(/fonts/dejavu-sans.woff2) format("woff2");
	font-family:"DejaVu Sans";
}

@font-face {
	font-weight:bold;
	src:url(/fonts/dejavu-sans-bold.woff2) format("woff2");
	font-family:"DejaVu Sans";
}

@font-face {
	src:url(/fonts/inconsolata.woff2) format("woff2");
	font-family:"Inconsolata";
}

@font-face {
	src:url(/fonts/tf2c.woff2) format("woff2");
	font-family:"TF2C";
}

@font-face {
	src:url(/fonts/tf2c-secondary.woff2) format("woff2");
	font-family:"TF2C Secondary";
}

@font-face {
	src:url(/fonts/tf2c-build.woff2) format("woff2");
	font-family:"TF2C Build";
}

@font-face {
	src:url(/fonts/tf2c-professor.woff2) format("woff2");
	font-family:"TF2C Professor";
}

/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

:root {
	--fontGeneric:"DejaVu Sans", sans-serif;
	--fontCode:"Inconsolata", monospace;
	--fontPrimary:"TF2C", serif;
	--fontSecondary:"TF2C Secondary", sans-serif;
	--fontBuild:"TF2C Build", serif;

	--contentWidth:1000px;
	--sidebarWidth:300px;

	--bannerWidth:1400px;
	--bannerHeight:300px;
	--bannerFade:100px;
	
	--mainWidth:1600px;

	--colTFDarker:#2A2725;
	--colTFDark:#3B352D;
	--colTFMid:#51493E;
	--colTFLight:#9E9684;
	--colTFLighter:#ECE3CB;

	--colSecondaryDarker:#140F0F;
	--colSecondaryDark:#282020;
	--colSecondaryMid:#332929;
	--colSecondaryLight:#3F3333;
	--colSecondaryLighter:#594747;

	--colPrimaryDarker:#71625F;
	--colPrimaryDark:#8A7D78;
	--colPrimaryMid:#A69A92;
	--colPrimaryLight:#C4B9AE;
	--colPrimaryLighter:#D8CCC0;

	--colOrangeDark:#CC592C;
	--colOrangeMid:#FF7C44;
	--colOrangeLight:#FFAA6E;
}

* {
	box-sizing:border-box;
	margin:0px;
	border:0px;
	padding:0px;
}

html {
	scroll-behavior:smooth;
}

/* ======================== */
/* TEAM FORTRESS BUTTONS    */
/* ======================== */

.button {
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow:0px 3px 5px rgba(0,0,0,0.5);
	border:1.5px solid transparent;
	border-radius:5px;
	background:linear-gradient(180deg, #E5D9C1, #B8AE92, #9C8E71) padding-box, linear-gradient(180deg, #FFFDF0, #FFF7DA 10%, #B6A279 90%, #91794C 100%) border-box;
	background-repeat:no-repeat;
	padding:5px;
	width:250px;
	height:40px;
	color:var(--colTFDarker);
	font-size:24px;
	font-family:var(--fontBuild);
	text-decoration:none;
}

.button:hover, .button:focus {
	background:linear-gradient(180deg, #9D4F3F, #70392D, #512A20) padding-box, linear-gradient(180deg, #DA9C77, #AD5444 10%, #572D22 90%, #2C1813 100%) border-box;
	color:var(--colTFLighter);
}

.button:active {
	background:linear-gradient(180deg, #80735B, #9D8C6D, #BAA57F) padding-box, linear-gradient(180deg, #5C5341, #695F4B 10%, #9E8C6C 90%, #D9CEB6 100%) border-box;
}