@font-face 
{
  font-family: magic;
  src: url(../fonts/YuseiMagic-Regular.ttf);
}
@font-face 
{
  font-family: acme;
  src: url(../fonts/Acme-Regular.ttf);
}
/* * {margin: 0; padding: 0; box-sizing: border-box; font-family: magic;} */
* {margin: 0; padding: 0; box-sizing: border-box; font-family: acme;}
html 
{
	scroll-behavior: smooth;
}

body {background: url(img/more-leaves.png); }
h1 
{
	/* font-family: tahoma;  */
	font-size: 45px; 
	text-align: center; 
	text-shadow: 1px 1px 3px navy; 
	color: black;
	margin-top: 50px;
	margin-bottom: 10px;
}
div.heading-wrap > h1 {display: flex; align-items: flex-start;}
div.heading-wrap {display: flex;}
div.heading-wrap + div 
{
	border-radius: 5px;
	box-shadow: 0 0 10px black;
}
h1 > a:hover 
{
	transform: scale(1.05);
}
h1 > a 
{
	text-decoration: none;
	color: #666;
	text-shadow: none;
	font-size: 25px;
	display: block;
	margin: 15px;
	transition: transform 500ms;
}
main > nav > ul > li > a:hover 
{
	background-color: white;
	color: navy;
}
main > nav > ul > li > a
{
	display: block;
	width: 300px;
	margin: 20px;
	border: 2px solid white;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
}

main > nav > ul 
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	/* background-color: #ccc; */
}
main 
{
	width: 65%;
	margin: 10px auto;
}
nav > ul 
{
	background-color: navy;
	padding: 10px;
}
header > nav > ul > li > a, nav > ul > li {display: inline-block;}
header > nav > ul > li > a:hover
{
	background-color: white;
	color: navy;
}
nav > ul > li > a
{
	padding: 10px;
	color: white;
	text-decoration: none;
	/* font-family: tahoma; */
	font-size: 20px;
	transition: background 550ms, color 550ms;
	border-radius: 5px;
}
img.lecture-shark 
{
	max-height: 75vh;
	display: block;
	margin: 0 auto;
	width: auto;
}
img 
{
	max-width: 100%;
}
main.main-bonus > ul > li 
{
	margin: 15px;
	font-size: 25px;
}
main.main-bonus > ul 
{
	margin: 20px;
}
a.active 
{
	box-shadow: 0 0 5px white;
}
main.main-bonus > p 
{
	font-size: 25px;
}
main#home > h1 {margin: 0;}
main#home > h1:first-child {margin-top: 40px;}
div.history > ol > li 
{
	color: #33;
	font-size: 30px;
}
div.history > ol 
{
	margin: 25px 75px;
}
div.history > p
{
	color: #333;
	font-size: 30px;
	margin: 20px;
}
div.history 
{
	/* border: 2px solid navy; */
	padding: 20px;
	border-radius: 15px;
	background-color: #eee;
	box-shadow: 1px 1px 15px #333;
	margin-bottom: 45px;
}
div.main-history > section > a > img
{
	/* max-width: 175px; */
	padding:0;
	border-radius: 10px;
	max-height: 150px;
	width: auto;
}
div.main-history > section:hover
{
	transform: scale(1.05);
	text-decoration: underline;
}
div.main-history > section > img, div.main-history > section > a 
{
	display: block;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
}
div.main-history > section 
{
	margin: 10px;
	max-width: 175px;
	transition: transform 250ms, text-decoration 250ms;
	border: 1px solid navy;
	padding: 20px;
	border-radius: 10px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
div.main-history
{
	display: flex;
	justify-content: space-between;
	align-items: space-between;
	flex-wrap: wrap;
}


/* RESPONSIVE STUFF */
@media (max-width: 500px)
{

	main 
	{
		width: 100%;
	}
	div.heading-wrap > h1 > a 
	{
		display: inline-block;
	}
	div.heading-wrap 
	{
		margin: 0 auto;
		position: relative;
		top: 20px;
	}
	div.heading-wrap > h1
	{
		display: block;
		margin: 0;
		/* border: 2px solid red; */
		padding: 0;
		width: 100%;
		text-align: left;
	}
	div
	{
		width: 95%;
		margin: 0 auto;
		padding: 0;
		/* border: 1px solid black; */
	}
	main > nav > ul > li > a
	{
		margin: 0 0 5px 0;
	}
	main > nav > ul 
	{
		border-radius: 0;
	}
	h1 > a 
	{
		font-size: 15px;
	}
	h1 
	{
		font-size: 25px;
	}
}