/* shared.css 
 *
 * common style information.
 *
 * */

body, html, h1, h2, h3, h4, h5, h6, p, a, img, div, ol, ul, li, table, td, tr, th {
	margin: 0;
	padding: 0;
}

/* base calculations */
:root {
	--base-font-size: 1em;
	--h1-font-size: calc(var(--base-font-size) * 2.8);
	--h2-font-size: calc(var(--base-font-size) * 1.8);
	--h3-font-size: calc(var(--base-font-size) * 1.7);
	--h4-font-size: calc(var(--base-font-size) * 1.6);
	--h5-font-size: calc(var(--base-font-size) * 1.4);
	--h6-font-size: calc(var(--base-font-size) * 1.2);

	--padding: 2em;

	--base-font-color: #404040;
}

body {
	background-color: #FFFFFF;
}

html {
	font-family: Helvetica, Arial, sans-serif;
	color: var(--base-font-color);
}

div.hr {
	text-align: center;
}

div.hr img {
	width: 10vw;
	max-width: 100px;
}

div.hr-section {
	margin: 140px 0 40px 0;
	background-image: url('../imgs/black_splotch.jpg');
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

div.hr-section h2 {
	padding: 40px 0 40px 0;
	text-transform: uppercase;
	text-shadow:	-2px -2px 4px #FFFFFF, 
					2px -2px 4px #FFFFFF, 
					2px 2px 4px #FFFFFF, 
					-2px 2px 4px #FFFFFF;
}

div.hr-section h2 a {
	font-size: var(--h2-font-size);
}

div.hosts {
	margin: 4em var(--padding) 4em var(--padding);
	text-align: center;
}

div.host-boxes {
	display: inline-block;
	max-width: 600px;
}

div.host-box {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	width: 40%;
	margin: 1em;
}

div.host-box img {
	width: 100%;
}

div.hosts h2,
div.funding h2, 
div.copyright h2 {
	font-size: 1.2em;
}

div.funding {
	margin: 4em var(--padding) 4em var(--padding);
	text-align: center;
}

div.funder {
	margin: 1em 0 0 0;
}

div.funder h3,
div.copyright h3,
div.hosts h3 {
	font-size: 1em;
}

div.funder img {
	margin: 0 1em 1em 1em;
	max-width: 300px;
	width: 50vw;
}

div.copyright {
	margin: 4em var(--padding) 4em var(--padding);
	text-align: center;
}

div.copyright img {
	margin: 1em;
	max-width: 300px;
	width: 50vw;
}

div.copyright p {
	margin-top: 3em;
}

p, a, li, td {
	font-size: var(--base-font-size);
	color: var(--base-font-color);
}

h1 {
	font-size: var(--h1-font-size);
	color: var(--base-font-color);
}

h2 {
	font-size: var(--h2-font-size);
	color: var(--base-font-color);
}

h3 {
	font-size: var(--h3-font-size);
	color: var(--base-font-color);
}

h4 {
	font-size: var(--h4-font-size);
	color: var(--base-font-color);
}

h5 {
	font-size: var(--h5-font-size);
	color: var(--base-font-color);
}

h6 {
	font-size: var(--h6-font-size);
	color: var(--base-font-color);
}

.logo-fill-height {
	height: 80%;
}

.shadow {
	filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
}