:root {
	--contentlinkbase: #000055;
	--contentlinkmid: #444444;
	--contentlinkdark: #333333;
	--contentlinkbright: #555555;
	--menuboxbase: #212121;
	--menuboxhover: #1460c4;
	--menulinkbase: #EEEEEE;
	--menulinkdark: #AAAAAA;
	--menulinkbright: #FFFFFF;
}
@keyframes menu-on {
	25% {font-size: 1.8vw; padding-top: 0.6vmin; padding-bottom: 0.6vmin; border-radius: 1.3vmin;}
	60% {border-radius: 1.3vmin;}
	100% {background-color: var(--menuboxhover); font-size: 1.8vw; padding-top: 0.6vmin; padding-bottom: 0.6vmin; border-radius: 0.2vmin;}
}
@keyframes menu-off {
	0% {background-color: var(--menuboxhover); font-size: 1.8vw; padding-top: 0.6vmin; padding-bottom: 0.6vmin; border-radius: 0.2vmin;}
	100% {background-color: var(--menuboxbase); font-size: 1.5vw; padding-top: 1vmin; padding-bottom: 1vmin; border-radius: 1.3vmin;}
}
@keyframes link-sizzle {
	0% {color:var(--menulinkbase);}
	10% {color:var(--menulinkbase);}
	15% {color:var(--menulinkbright);}
	20% {color:var(--menulinkdark);}
	25% {color:var(--menulinkbright);}
	30% {color:var(--menulinkbase);}
	100% {color:var(--menulinkbase);}
}
@keyframes content-sizzle {
	0% {color:var(--contentlinkbase);}
	10% {color:var(--contentlinkmid);}
	12% {color:var(--contentlinkbright);}
	14% {color:var(--contentlinkdark);}
	16% {color:var(--contentlinkbright);}
	18% {color:var(--contentlinkmid);}
	20% {color:var(--contentlinkbase);}
	100% {color:var(--contentlinkbase);}
}
@keyframes img-on {
	100% {width: 70%; padding-left: 15%; padding-right: 15%; padding-top: 1.7%; padding-bottom: 1.7%;}
}
@keyframes heading-in {
	0% {margin-left: 14%; color: rgba(0,0,0,0);}
	100% {margin-left: 0; color: rgba(0,0,0,1);}
}
body {
	margin: 0;
}
#body-container {
	background-image: url("../img/background.jpg");
	background-repeat: repeat;
}
#menu {
	width: 100%;
	background-color: black;
	top: 0;
}
#menu-list {
	margin-left: 5%;
	margin-right: 5%;
}
#menu-list li {
	list-style-type: none;
	display: inline-block;
	background-color: var(--menuboxbase);
	text-align: center;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	border-radius: 1.3vmin;
}
#menu-list li:hover {
	animation-name: menu-on;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
}
.menu-item {
	text-decoration: none;
	color: #EEEEEE;
	font-family: 'Philosopher', sans-serif;
	letter-spacing: 1px;
	animation-name: link-sizzle;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
#link1 {
	animation-delay: 1s;
}
#link2 {
	animation-delay: 1.3s;
}
#link3 {
	animation-delay: 1.6s;
}
#link4 {
	animation-delay: 1.9s;
}
#link5 {
	animation-delay: 2.2s;
}
.menu-item:hover {
	color: #FFFFFF;
	animation-name: link-sizzle;
	animation-play-state: paused;
}
#fbicon {
	height: 2.8vmin;
	margin-right: 1vmin;
}
#content-container {
	padding-bottom: 5%;
	font-size: 4vmin;
	padding-left: 10%;
	padding-right: 10%;
}
h1 {
	font-size: 6vmin;
	animation-name: heading-in;
	animation-duration: 1.4s;
	animation-fill-mode: forwards;
}
.content-image {
	width: 60%;
	height: auto;
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 5%;
	padding-bottom: 5%;
}
.content-image:hover {
	animation-name: img-on;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
}
.content-link {
	text-decoration: none;
	color: var(--contentlinkbase);
	animation-name: content-sizzle;
	animation-duration: 4.6s;
	animation-iteration-count: infinite;
	animation-delay: 1s;
}
.content-link:hover {
	animation-name: content-sizzle;
	animation-play-state: paused;
	color: var(--contentlinkbright);	
}
@media screen and (max-width: 768px) {
	#menu {
		position: static;
		height: 13%;
	}
	#menu-list li {
		width: 45%;
		margin-top: 7px;
		margin-bottom: 7px;
		font-size: 4vw;
	}
	#content-container {
		margin-top: 0%;
	}
	#menu-list {
		margin-left: 1%;
		margin-right: 1%;
	}
	#fbicon {
		margin-bottom: 0;
	}
	#backtop {
		font-size: 14pt;
	}
	.banner-image  {
		display: none;
	}
}
@media screen and (min-width: 769px) {
	#menu-list li {
		width: 18%;
		font-size: 1.5vw;
		animation-name: menu-off;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}
	#menu {
		position: fixed;
		height: 9%;
	}
	#content-container {
		margin-top: 11vmin;
	}
	#menu-list {
		margin-left: 5%;
		margin-right: 5%;
	}
	#fbicon {
		margin-bottom: -0.5vmin;
	}
	#backtop {
		display: none;
	}
}