/* ------------------------------------------- */
/* Font Links */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* Custom Properties */
/* ------------------------------------------- */
:root{
	/*Colors*/
	--clr-black:16 17 25;
	--clr-white:255 250 250;
	--clr-gray:120 120 120;
	--clr-grey:120 120 120;
	--clr-darkred:108 26 11;
	--clr-gold:246 195 66;
	--clr-lightred:244 159 144;
	--clr-brown:59 43 2;
	--clr-lightblue:45 48 71;
	/*Font Sizes*/
	--fs-900:6.25rem;
	--fs-800:5rem;
	--fs-700:3.75rem;
	--fs-600:2.5rem;
	--fs-500:1.875rem;
	--fs-400:1.375rem;
	--fs-300:1.125rem;
	--fs-200:.875rem;
	--fs-100:.575rem;
	/*Font Families*/
	--ff-headtext:'din-condensed', 'Arial', sans-serif;
	--ff-bodytext:'din-2014', 'Avenir', sans-serif;
	--ff-comictext:'ccmeanwhile', 'Comic Sans MS', monospace;
	--ff-fallback:'Avenir', sans-serif;
	/*Font Weights*/
	--fw-900:900;
	--fw-800:800;
	--fw-700:700;
	--fw-600:600;
	--fw-500:500;
	--fw-400:400;
	--fw-300:300;
	--fw-200:200;
	--fw-100:100;
};
/* ------------------------------------------- */
/* Reset */
/* ------------------------------------------- */
*,*::before,*::after {
	box-sizing:border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, picture {
	margin:0 auto;
	padding:0 auto;
}

h1,h2,h3,h4,h5,h6, p{
	font-weight: 400;
}

body{
	font-family: var(--ff-bodytext);
	font-size: var(--fs-300);
	color: hsl(var(--clr-white));
	background-color: hsl(var(--clr-black));
	line-height: 1.5;	
	min-height:100vh;
}

img, picture {
	max-width: 100%;
	display:block;
}

input, button, textarea, select{
	font:inherit;
}

/*remove animations for people who've turned them off*/

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior:auto !important;
	}
}
/* ------------------------------------------- */
/* Utility Classes */
/* ------------------------------------------- */
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* Colors */
.text-black{
	color: rgb( var(--clr-black));
}
.text-white{
	color: rgb( var(--clr-white));
}
.text-gray, .text-grey{
	color: rgb( var(--clr-gray));
}
.text-darkred{
	color: rgb( var(--clr-darkred));
}
.text-gold{
	color: rgb( var(--clr-gold));
}
.text-lightred{
	color: rgb( var(--clr-lightred));
}
.text-brown{
	color: rgb( var(--clr-brown));
}
.text-lightblue{
	color: rgb( var(--clr-lightblue));
}
.bg-black{
	background-color: rgb( var(--clr-black));
}
.bg-white{
	background-color: rgb( var(--clr-white));
}
.bg-gray, .bg-grey{
	background-color: rgb( var(--clr-gray));
}
.bg-darkred{
	background-color: rgb( var(--clr-darkred));
}
.bg-gold{
	background-color: rgb( var(--clr-gold));
}
.bg-lightred{
	background-color: rgb( var(--clr-lightred));
}
.bg-brown{
	background-color: rgb( var(--clr-brown));
}
.bg-lightblue{
	background-color: rgb( var(--clr-lightblue));
}

/* Typography */
.ff-headtext{
	font-family: var(--ff-headtext);
}
.ff-bodytext{
	font-family: var(--ff-bodytext);
}
.ff-comictext{
	font-family: var(--ff-comictext);
}

/* Font Sizes */
.fs-900{font-size:var(--fs-900);}
.fs-800{font-size:var(--fs-800);}
.fs-700{font-size:var(--fs-700);}
.fs-600{font-size:var(--fs-600);}
.fs-500{font-size:var(--fs-500);}
.fs-400{font-size:var(--fs-400);}
.fs-300{font-size:var(--fs-300);}
.fs-200{font-size:var(--fs-200);}
.fs-100{font-size:var(--fs-100);}

.fw-900{font-weight:var(--fw-900);}
.fw-800{font-weight:var(--fw-800);}
.fw-700{font-weight:var(--fw-700);}
.fw-600{font-weight:var(--fw-600);}
.fw-500{font-weight:var(--fw-500);}
.fw-400{font-weight:var(--fw-400);}
.fw-300{font-weight:var(--fw-300);}
.fw-200{font-weight:var(--fw-200);}

.m-5{}
.m-4{}
.m-3{}
.m-2{}
.m-1{}
.mx-auto{}
.my-auto{}

.p-5{padding:5em;}
.p-4{padding:4em;}
.p-3{padding:3em;}
.p-2{padding:2em;}
.p-1{padding:1em;}
/* ------------------------------------------- */
/* Components */
/* ------------------------------------------- */
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}

/* ------------------------------------------- */
/* Specifics */
/* ------------------------------------------- */
.d-block{
	display:block;
}

.d-grid{
	display:grid;
}

.d-flex{
	display:flex;
}

.float-left{
	float:left;
}

.half-size{
	width:50%;
}

.iframe-contain{
	position:relative;
	width:100%;
	height:100%;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:block;
}

iframe{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100%;
	height:100%
}

.line{
	height:3px;
}

.separate img{
	max-height:50px;
}

.header-logo{
	max-height:100px;
}


/*------Quick Button Styles-------*/
button{
	background:rgb(var(--clr-white));
	border-radius:15px;
	border:solid 3px rgb(var(--clr-darkred));
}

button:hover{
	background:rgb(var(--clr-lightred));
}