@charset "utf-8";
/* BNB CORE */

/*  VARS  */
:root {
	/*	CONTRAST  */
	--logo1: #000888;
	--logo2: #ff0000;
	--bgc: #e9e9e9;
	--fgc: #000;
	--headbg: #212e65;
	--titlebg: #a2b8c9;
	--menubg: #e4e4e4;
	--footerbg: #545454;
	--white: #fff;
	--black: #000;
	--grayed-bg: #7e7e7e;
	--grayed-fg: #e8e8e8;
	
	/*	PRIM BLue  */
	--blueLL: #d2c8ff;
	--blueL: #9e89ff;
	--blue: #4c31c7;
	--blueD: #2f15a2;
	--blueDD: #1f1352;
	
	/*	SEC ReD  */
	--redLL: #ffa1a1;
	--redL: #ff7676;
	--red: #c03d3d;
	--redD: #c60000;
	--redDD: #9b0000;

	/*	SEC ORange  */
	--orangeLL: #FFB663;
	--orangeL: #FFA239;
	--orange: #FF8600;
	--orangeD: #C66800;
	--orangeDD: #9B5200;
	
	/*  COMPL BRown	*/
	--brownLL: #ffe6b8;
	--brownL: #e0bd7e;
	--brown: #b78f49;
	--brownD: #8f6923;
	--brownDD: #634207;

	/* Header Sizes */
	--h1size: 3.43rem;
	--h2size: 2rem;
	--h3size: 1.5rem;
	--h4size: 1rem;
	--h5size: 0.7rem;
	--h6size: 0.4rem;

	/* FONTS */
	--ff-primary: 'Helvetica', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	--ff-secondary: 'Arial', system-ui, sans-serif;
	--ff-accent: 'Helvetica', sans-serif;
	--ff-bold: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
 }
 
 /* Set core body defaults */
 body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
 }

/* CORE */
body,td,th {
	margin: 0;
	padding: 0;
	font-family: var(--ff-primary);
	font-size: 18px;
}
body { background-color: var(--bgc); }

/* LINKS */
a { text-decoration: none }
a:link,a:active,a:visited { color: var(--logo1); }
a:hover {
	color: var(--logo2);
	/*text-shadow: 2px 1px 5px var(--brownLL), -1px -2px 10px var(--brownLL);*/
}

/* HEADINGS */
h1 {
	font-family: 'Arial Black', system-ui, sans-serif;
	margin: 15px 0;
	font-size: var(--h1size);
	letter-spacing: .2em;
	font-weight: bolder;
	line-height: .1em;
}
h2 {
	font-family: Helvetica, system-ui, sans-serif;
	margin: 10px 0 15px;
	font-size: var(--h2size);
	letter-spacing: 0.05rem;
	font-weight: bold;
	line-height: 1.8rem;
}
h3 {
	font-family:'Arial Narrow', system-ui, sans-serif;
	margin: 0;
	padding: 5px;
	font-size: var(--h3size);
	letter-spacing: .05rem;
	font-weight: 700;	
	line-height: 1rem;
}
h4 {
	font-family: Georgia, Times, 'Times New Roman', serif;
	margin: 5px 2px;
	font-size: var(--h4size);
	letter-spacing: .15em;
	font-weight: 300;
	line-height: .05em;
	text-align: center;
}


/*		LAYOUT 	 */
main {
	margin: 0;
	display: contents;
}
article {
	margin: 10px 0 10px 30px;
	padding: 10px 10px 10px 0;
}
footer {
	position: fixed;
	clear: both;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 70%;
}
spacer {
	display: block;
	height: 50px;
}
/* 	FX 		*/
.hover img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover:hover img {
	opacity: .25;
}

.glow {
	text-shadow: 0 0 5px #000, 1px 1px 5px #000, -1px -1px 3px #000, -5px -4px 5px #000, -4px 5px 4px #000, 5px -4px 3px #000;
	/*text-shadow: 2px 2px 10px #000, -2px -2px 10px #000, -3px 3px 20px #000, 3px -3px 20px #000;*/
	/* text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color; */
}
.glowOrange { 
	opacity: 0.85;
	border-radius: 50%;
	background-color: var(--orange);
	box-shadow: -2px 3px 2px var(--orangeL), 2px 3px 1px var(--orangeL), -3px -2px 3px var(--orangeLL);
}
.glowBlue { 
	opacity: 0.85;
	border-radius: 50%;
	background-color: var(--blue);
	box-shadow: -2px 3px 2px var(--blueL), 2px 3px 1px var(--blueL), -3px -2px 3px var(--blueLL);
}
.glowBrown { 
	opacity: 0.85;
	border-radius: 50%;
	background-color: var(--brown);
	box-shadow: -2px 3px 2px var(--brownL), 2px 3px 1px var(--brownL), -3px -2px 3px var(--brownLL);
}

/*
M:	250-499
T:	500-699
D:	700->
*/

/* MOBILE */
@media screen and (min-width: 250px) and (max-width: 499px) {
	body { 
		font-size: .8rem; 
	}
	.mob {
		display: block;
		text-align: center;
		font-size: .5rem;
		margin: 10px 0 -20px 0;
	}
}
@media screen and (min-width: 500px) and (max-width: 699px) {
	body { 
		font-size: .9rem; 
	}
	.mob { 
		display: none 
	}
}
@media screen and (min-width: 700px) {
	body { 
		font-size: 1rem; 
	}
	.mob { 
		display: none 
	}
}


/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	  scroll-behavior: auto;
	}
 
	*,
	*::before,
	*::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	  scroll-behavior: auto !important;
	}
 }