body { background: rgb(33,9,121); background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
	font-family: Arial; color: white; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
	

#shadowed {
	-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.8));
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
}

#header { margin-top:40px; margin-bottom:20px; text-align:center; }

#content { margin: auto; width: 90%; max-width:1200px;}

#content-container { background-color: rgba(0,0,180,.5); }

#front-content { margin: auto; width: 90%; text-align:center;}

img.page-logo { width: 90%; max-width: 500px; height: auto; object-fit: contain; }

a { text-decoration: underline; color: #00ffff;}

a:hover { text-decoration: underline; color: red;}

/* navigation section */

div.nav-container { margin-bottom: 40px; border-radius: 20px; text-align:center;}
.nav-container a { text-decoration: none; color: white;}

.flex-container {
	display: flex;

	flex-flow: row wrap;

	justify-content: center;

	padding: 0;
	margin: 0;
	list-style: none;
}

.flex-container a {
	text-decoration: none;
}

.flex-item {
	padding: 5px;
	width: 300px;
	height: 290px;
	margin-top: 10px;
}

img {
	height: auto;
	width: auto;
	max-width:90%;
	max-height:90vh;
	
	display:block;
	margin-left: auto;
	margin-right: auto;
}

img.flex-nav-img {
	width: 100%;
	height: auto;
}

.flex-nav-header-img { width: 80%; max-width: 150px; height: auto; object-fit: contain; padding-top: 10px; margin-bottom: 10px; }

.nav-container h1 { padding-top: 10px; margin-bottom: 10px; }

.nav-container h2 { white-space: nowrap; }

/*
.heading { position: relative; font-size: 30px; z-index: 1; overflow: hidden; text-align: center; }
.heading:before, .heading:after { position: absolute; top: 54%; overflow: hidden; width: 40%; height: 1px; content: '\a0'; background-color: white;}
.heading:before { margin-left: -48%; text-align: right; }
.heading:after { margin-left: 8%; }
*/

.heading { font-size: 30px; z-index: 1; overflow: hidden; text-align: center; background: linear-gradient(90deg, rgba(0,0,238,0) 10%, rgba(0,0,238,1) 25%, rgba(3,3,205,1) 75%, rgba(9,9,121,0) 90%); padding:10px;}

/* Footer Section */

div.footer { width:100%; background-color:rgba(0,0,0,0.7); overflow: hidden; padding-bottom: 20px; margin-top: auto;}
div.footer h2 { font-family:Arial; font-size:23px; text-align:left; color:#FFFFFF; margin-bottom:0; }
div.footer a { font-family:Arial; float: left; display: block; color: #ffffff; text-align: center; padding-top:8px; padding-bottom:8px; padding-right: 14px; text-decoration: none;font-size: 17px;}
div.footer a:hover {text-decoration: underline;}
div.footer hr {margin-top:2px;}
div.footer-content {width:80%; margin:auto;}

span.note {
	position: relative;
	display: inline-block;
}

.note .note-text {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: white;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}

.note-number {
	text-decoration: underline;
	color: #00ffff;
}

.note:hover .note-text {
	visibility: visible;
}

span.notea {
	position: relative;
	display: inline-block;
}

.notea .notea-text {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: white;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}

.notea:hover .notea-text {
	visibility: visible;
}