/* Custom Variables */
:root {
	--content_max_width: 1200px;
	--border: none;
	--border-radius: 3px;
	--gap: min(10px, 2vw);
}

/* General Setup */

body {
   background: #7F7467;
}

a {
   cursor: pointer;
   cursor: hand;
   text-decoration: none;
}

a:visited {
   color: #005288;
}

a img {
   border: none;
}


/* Content */
main {
	display: var(--display_content);
	font-size: calc( var(--box_width) / 13);
	padding: var(--gap);
}
main a {
	text-decoration: underline;
	color:#005288;
}
main a:visited {
	text-decoration: underline;
	color:#005288;
}



/* Icon Lists */
.Icon_List li{
    background-position: 0px 2px;
    background-repeat: no-repeat;
    padding: 0px 20px;
}
.Icon_List  {
    list-style-position: inside;
    list-style-type: none;
    padding: 0px;
}




/* General Setup */
* {
	box-sizing: border-box;
}

a {
	color: inherit;
}

sup {
   position: relative;
   top: -0.5em;
   font-size: 80%;
}

sub {
   position: relative;
   top: -0em;
   font-size: 80%;
}

/* Site Template */
body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	background-color: #7F7467;
	overflow-y: scroll;
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	justify-items: flex-start;
	align-items: flex-start;
	gap: var(--gap);
}

.center {
	width: 100%;
	display: flex;
	justify-content: center;
}

header,
main,
footer {
	width: calc(100vw - 2 * var(--gap));
	max-width: var(--content_max_width);
	margin: 0px auto;
}

main {
	padding: min(50px, 3%);
}

header .Title * {
	font-size: min(3em, 5vw);
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

header .Socials svg {
	fill: #ffffff;
	width: min(32px, 5vw);
	margin-right: 5px;
}

header .Socials {
	margin-bottom: var(--gap);
}

#Menu {
	display: grid;
	justify-items: stretch;
	align-items: stretch;
	justify-content: space-between;
	align-content: start;
	grid-auto-flow: row;
	gap: var(--gap);
}

#Menu > a {
	text-align: center;
	text-decoration: none;
	border: var(--border);
	border-radius: var(--border-radius);
	background-color: black;
	color: white;
	padding: var(--gap);
	font-weight: bold;
	height: 100%;

	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 10%;
	justify-content: flex-end;
}
#Menu > a img {
	max-width: 70%;
	max-height: 70%;
}
#Menu > a {
	justify-content: center;
}
#Menu > a img {
	display: none;
}

#Menu { 
	grid-template-columns: repeat(5, 1fr); 
}
#Menu .DoubleWidth { grid-column-end: span 2; }
#Menu .DoubleHeight { grid-row-end: span 2; }
@media screen and (max-width: 800px) {
	#Menu { 
		grid-template-columns: repeat(2, 1fr); 
	}
	#Menu .DoubleHeight { grid-row-end: auto; }
	#Menu .DoubleWidth { grid-column-end: auto; }
	#Menu #AlistairBoyer { grid-column-end: span 2; }
	#Menu > a::before {
		content: none;
		padding-bottom: inherit;
	}
}

#Menu #AlistairBoyer {  background-color: #002299; }
#Menu #Research {       background-color: #532E63; }
#Menu #Publications {   background-color: #F26335; }
#Menu #Tools {		    background-color: #F8C000; }
#Menu #Funding {        background-color: #C8B18B; }
#Menu #Presentations {	background-color: #2e6353; }
#Menu #Code {       	background-color: #2e6353; }
#Menu #Teaching {       background-color: #223c60; }
#Menu #BoyerGroup {	    background-color: #c5135d; }
#Menu #Outreach {       background-color: #5dc513; }

footer > a {
	background-color: #007C85;
	border: var(--border);
	border-radius: var(--border-radius);
	display: block;
	text-align: center;
	padding: var(--gap);
	font-weight: bold;
	color: #ffffff;
	text-decoration: underline;
}

main {
	background-color: #ffffff;
	border: var(--border);
	border-radius: var(--border-radius);
	min-height: 70vh;
	}