
:root{
	/* Spring Theme */
	--theme-color: 75,0,75;
	--theme-color-dark: 35,0,35;
	--theme-color-light: 150,0,150;
	--theme-color-dark-desaturated:50,25,50;
	--secondary-color: 200,0,0;
	--tertiary-color: 255,150,0;
	--background-image: url("/img/backgrounds/spring/med.jpg");
	--text-color: 80,40,80;
	
	--shadow: drop-shadow(0px 0px 2px rgb(var(--theme-color)));
	

	/* Summer Theme
	--theme-color: 0,50,0;
	--theme-color-dark: 0,25,0;
	--theme-color-dark-desaturated:25,50,25;
	--theme-color-light: 0,150,0;
	--accent-color: 100,50,0;
	--background-image: url("/img/backgrounds/creek1.jpg"); */

	/* Winter Theme
	--theme-color: 0,0,75;
	--theme-color-dark: 0,0,50;
	--theme-color-light: 0,0,150;
	--theme-color-dark-desaturated:25,25,50;
	--accent-color: 100,50,0;
	--background-image: url("/img/backgrounds/lake2.jpg"); */
	
	
	/* Fall Theme
	--theme-color: 120,35,0;
	--theme-color-dark: 25,0,25;
	--theme-color-light: 150,0,150;
	--accent-color: 100,50,0;
	--background-image: url("/img/backgrounds/lake4.jpg"); */
	
	/* Christmas Theme
	--theme-color: 100,0,0;
	--theme-color-dark: 25,0,25;
	--theme-color-light: 150,0,150;
	--accent-color: 100,50,0;
	--background-image: url("/img/backgrounds/lake4.jpg"); */
	

	--glass-color: 255,255,255;
	--glass-alpha: .9;
	--glass-blur: 5px;
	
	--menu-highlight: rgba(255,255,255,.33);

	--border-radius: 4px;
	
	--content-width: calc(100vw - 100px);
	--content-max-width: 1200px;
	--content-min-width: 600px;
	
	--content-padding:30px 35px;
	--grid-gap:30px;
}

@media only screen and (max-width:600px), only screen and (device-max-wdith:600px){
	:root{
		--background-image: url("/img/backgrounds/spring/small.jpg");
	}
}

html{
	font-size:12pt;
	scroll-behavior:smooth;
	line-height:150%;
}

body{
	min-height:100vh;
	margin:0px;
	padding:0px;
	font-size:1.05rem;
	font-family:calibri, oswald, helvetica, arial, sans-serif;
	background:linear-gradient(rgba(var(--theme-color),.50) 60vh, rgba(var(--theme-color),.20) 100vh, rgba(var(--theme-color),.3)) fixed, var(--background-image) no-repeat center top fixed, rgb(var(--theme-color));
	background-size:cover;
}

.compact{
	font-size:1rem;
}

body, .glass{
	color:rgb(var(--text-color));	
}

h1, h2, h3, h4, h5, h6{
	font-family: gill sans mt, trebuchet ms, helvetica, sans-serif;
	color:rgb(var(--theme-color));
	margin-top:calc(var(--grid-gap) * 2);
	line-height:133%;

}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{
	margin-top:0px;
}

h1{ font-size: 2.25rem; margin-bottom:2rem;}
h2{ font-size: 1.75rem; margin-bottom:1.75rem;}
h3{ font-size: 1.75rem; font-weight:normal; }
h4{ font-size: 1.5rem; margin-bottom:1.5rem;}
h5{ font-size: 1.5rem; margin-bottom:1.5rem; font-weight:normal;}
h6{ font-size: 1.1rem; margin-bottom:1.1rem;}

h1.page_title, h1.title{
	color:rgb(var(--glass-color));
	font-family:gill sans mt, trebuchet ms, helvetica, sans-serif;
	font-size:3rem;
}

h1.page_title{
	font-size:4rem;
	line-height:67%;
	margin-top:1rem;

}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{
	margin-top:0px;
}

p + p {
	margin-top:30px;
}


a, .details_wrapper .summary{
	text-decoration:none;
	color:rgb(var(--secondary-color));
	transition:color .5s;
}

.details_wrapper .summary{
	display:inline-block;
	margin-bottom:10px;
	width:auto;
}

.details_wrapper .summary::before{
	content: "►";
	font-size:.6em;
	vertical-align:text-top;
	margin-right:5px;
	display:inline-block;
	transition:all .25s;
}

.details_wrapper[data-open='open'] .summary::before{
	transform: rotate(90deg);
}


a:hover, .details_wrapper .summary:hover{
	cursor:pointer;
	color:rgb(var(--tertiary-color));
}


a.light{
	color:white;
}

a.light:hover{
	color:var(--tertiary-color);
}

img{
	display:block;
	max-width:100%;
	outline:0px;
}

header{
	display:grid;
	width:100%;
	place-items:center center;
	place-content:center center;
	min-height:70vmin;
	user-select:none;
	animation:fade_in;
	animation-duration:1s;
}

ol li, ul li{
	margin-bottom:1rem;
}

@keyframes fade_in{
	0% {opacity:0}
	100% {opacity:1}
}

#header{
	align-self:center;
	display:grid;
	place-items:center stretch;
	width:100%;
	box-sizing:border-box;
	grid-template-rows:1px min-content min-content 1px;
	grid-gap:10vmin;
}


#logo{
	width:50%;
	max-width:400px;
	min-width:250px;
	filter:var(--shadow);
	grid-area:2/1;
	margin:0px auto;
	transition:filter .5s;
}

.hover_glow{
	transition:filter .5s;
}

#logo:hover, .hover_glow:hover{
	cursor:pointer;
	filter:drop-shadow(0px 0px 10px rgb(var(--tertiary-color)));
}

#menu{
	grid-area:3/1;
	display:grid;
	grid-gap:2vw;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	width:var(--content-width);
	max-width:var(--content-max-width);
	min-width:var(--content-min-width);
	margin:0px auto;
	box-sizing:border-box;
}

#menu a, a.button{
	display:block;
	border-radius:var(--border-radius);
	border:solid white 1px;
	padding:20px 0px;
	color:white;
	font-weight:bolder;
	font-size:1.2rem;
	text-align:center;
	filter:var(--shadow);
	backdrop-filter: blur(var(--glass-blur));
	transition:background .5s, color .5s;
}

a.button{
	display:inline-block;
	padding:20px;
}

#menu a:hover, a.button:hover{
	background: var(--menu-highlight);
}


#menu .submenu_wrapper{
	position:relative;
	filter:var(--shadow);
	backdrop-filter: blur(var(--glass-blur));
}


#menu .submenu{
	position:absolute;
	display:none;
	text-align:left;
	width:100%;
	border:solid white 1px;
	border-radius:0px 0px var(--border-radius) var(--border-radius);
	border-top:0px;
	box-sizing:border-box;
	background:var(--menu-highlight);
	transition:opacity .5s;
	animation:fade_out;
	animation-duration:.5s;
	z-index:9999;
}


#menu .submenu_wrapper:hover .submenu, #menu .submenu_wrapper[data-expanded="expanded"] .submenu{
	display:block;
	animation:fade_in;
	animation-duration:.5s;
}

@keyframes fade_in{
	0%{opacity:0;}
	100%{opacity:1;}
}

@keyframes fade_out{
	0%{opacity:1; display:block;}
	100%{opacity:0;}
}

#menu .submenu_wrapper > a{
	filter:none;
	backdrop-filter: none;
}	

#menu .submenu_wrapper:hover > a, #menu .submenu_wrapper[data-expanded="expanded"] > a{
	border-radius:var(--border-radius) var(--border-radius) 0px 0px;
	border-bottom-color:transparent;
	border-bottom:0px;
	background:var(--menu-highlight);
}

#menu .submenu a{
	border:none;
	display:block;
	background:none;
	border-radius:0px;
	padding:10px 20px;
	text-align:left;
	filter:none;
	margin:0px;
	font-size:1rem;
	font-weight:normal;
}

#menu .submenu a:hover{
	background:rgba(255,255,255,.25);
}

#menu .submenu a:last-of-type{
	padding-bottom:15px;
}

header.small{
	min-height:auto;
	background: rgba(var(--theme-color), var(--glass-alpha));
	position:fixed;
	z-index:9999;
	margin-bottom:50px;
	border-bottom:solid rgb(var(--theme-color)) 1px;
	box-shadow:0px 0px 5px rgba(var(--theme-color-dark),.25);
	backdrop-filter: blur(var(--glass-blur));
	animation:show_small_menu;
	animation-duration:.5s;
	animation-timing-function:ease-out;
}

@keyframes show_small_menu{
	0% {opacity:0; margin-top:-5px; filter:blur(2px);}
	100% {opacity:1; margin-top:0px; filter:blur(0px);}
}

.small #header{
	grid-template-rows:auto;
	grid-template-columns:5fr 4fr;
	grid-gap:0;
	place-items:start start;
	margin:15px auto;
	width:var(--content-width);
	max-width:var(--content-max-width);
}


.small #logo{
	display:block;
	height:50px;
	max-width:auto;
	min-width:auto;
	width:auto;
	grid-area:1/1;
	margin:0px;
	justify-self:start;
}

.small #menu{
	justify-self:end;
	width:100%;
	justify-content:space-between;
	grid-area:1/2;
	display:flex;
	min-width:auto;
}

.small #menu .submenu_wrapper{
	filter:none;
}


.small #menu a{
	display:inline-block;
	filter:none;
	padding:12px;
	font-size:1rem;
	border:0px;
	border-radius:0px;
	color: white;
	font-weight:normal;
	text-align:auto;
	font-weight:auto;
	white-space:nowrap;
}

.small #menu a:hover, .small #menu .submenu_wrapper:hover > a{
	background:transparent;
	border-radius:0px;
	color:rgb(var(--tertiary-color));
}



.small #menu .submenu_wrapper{
	filter:none;
}

.small #menu .submenu{
	width:auto;
	border:solid white 1px;
	background:rgba(var(--theme-color),.8);
	border-radius:var(--border-radius);
	box-shadow:2px 2px 2px rgba(var(--theme-color),.25);
}

.small #menu .submenu::before{
	content: "▲";
	color:white;
	font-size:12px;
	position:absolute;
	top:-13px;
	left:16px;
	line-height:16px;
	transition:opacity 0s;
}

.small #menu .submenu_wrapper:last-of-type .submenu{
	right:0px;
}

.small #menu .submenu_wrapper:last-of-type .submenu::before{
	left:initial;
	right:16px;
}


.small #menu .submenu a{
	display:block;
	padding:12px 24px;
	color:white;
	font-size:.9em;
}

.small #menu .submenu a:first-of-type{
	padding-top:16px;
}

.small #menu .submenu a:last-of-type{
	padding-bottom:16px;
}

.small #menu .submenu a:hover{
	background:rgba(255,255,255,.2);
}

#menu_icon{
	display:none;
}


cite{
	font-style:normal;
	font-size:.8em;
	opacity:.75;
}

cite::before{
	content:"(";
}

cite::after{
	content:")";
}

img.icon{
	display:inline-block;
	height:calc(1em - 4px);
	vertical-align:text-top;
	padding:2px 5px;
	border-radius:var(--border-radius);
}

img.icon:hover{
	background: rgba(var(--tertiary-color),.4);
}

input[type='text'], input[type='password'], textarea, input[type='button'], input[type='submit'], .dark_button{
	font-size:1.05rem;
	font-family:calibri, oswald, helvetica, arial, sans-serif;
	line-height:150%;
	background:rgba(var(--glass-color),.35);
	padding:8px;
	margin:10px 0px;
	display:block;
	min-width:300px;
	width:75%;
	border:solid white 1px;
	border-radius: var(--border-radius);
	transition:background .5s, border-color .5s, color .5s;
	max-width:90%;
	box-sizing:border-box;
	color:rgb(var(--text-color));
	outline:0px;
}

.dark_button{
	width:initial;
	display:inline-block;
	padding:20px;
	min-width:initial;
	box-shadow:0px 0px 5px rgba(var(--theme-color),.33);
}

input[type='text']:focus, input[type='password']:focus, textarea:focus, input[type='button']:hover, input[type='submit']:hover, .dark_button:hover{
	border-color:rgb(var(--theme-color-light));
	background:rgba(var(--glass-color),.65);
}

.dark_button:hover, input[type='submit']:hover, input[type='button']:hover{
	color:rgb(var(--theme-color-light));
}

input[type='button'], input[type='submit']{
	width:initial;
	min-width:initial;
	padding:15px 20px;
	cursor:pointer;
}

.invalid{
	background:rgba(255,200,200,.3) !important;
	border:solid red 1px !important;
}

input[type='submit'].invalid{
	cursor:not-allowed;
}

textarea{
	min-height:200px;
	resize:vertical;
}
	
.container{
	width:var(--content-width);
	max-width:var(--content-max-width);
	min-width:var(--content-min-width);
	margin:0px auto;
	box-sizing:border-box;
}

p:last-child{
	margin-bottom:0px;
}

.padded{
	padding:var(--content-padding);
	box-sizing:border-box;
}

.centered{
	margin:0px auto;
	justify-self:center;
}
	
.glass{
	background:linear-gradient(rgba(var(--glass-color),.75), rgba(var(--glass-color),var(--glass-alpha)) 50px);
	border:solid rgba(var(--glass-color),.var(--glass-alpha)) 1px;
	border-radius:var(--border-radius);
	backdrop-filter: blur(var(--glass-blur));
}


section, #section_menu{
	background:rgba(var(--glass-color),.6);
	padding-top:calc(var(--grid-gap) * 3);
	padding-bottom:calc(var(--grid-gap) * 3);
}

#section_menu{
	padding-top:var(--grid-gap);
	padding-bottom:var(--grid-gap);
}

#section_menu + section, #section_menu + script + section{
	padding-top:0px;
}

#section_menu a{
	display:inline-block;
	padding:15px;
	margin-right:5px;
	color:rgb(var(--theme-color));
	border-radius:var(--border-radius);
	transition:background .5s, color .5s;
}


#section_menu a:hover, #section_menu a.page_open{
	background:rgba(var(--glass-color),.65);
	color:rgb(var(--theme-color-light));
}



section:nth-of-type(2n){
	background:rgba(var(--theme-color-dark-desaturated), .5);
	color:white;
}

section:nth-of-type(2n) h1, section:nth-of-type(2n) h2, section:nth-of-type(2n) h3, section:nth-of-type(2n) h4, section:nth-of-type(2n) h5, section:nth-of-type(2n) h6{
	color:white;
}

.glass:nth-of-type(1n) h1, .glass:nth-of-type(1n) h2, .glass:nth-of-type(1n) h3, .glass:nth-of-type(1n) h4, .glass:nth-of-type(1n) h5, .glass:nth-of-type(1n) h6{
	color:rgb(var(--theme-color));
}


section .glass{
	background:linear-gradient(rgba(var(--glass-color),.5), rgba(var(--glass-color),.8) 50px);	
}


.rounded{
	border-radius: var(--border-radius);
}

.grid_2_1{
	grid-template-columns:2fr 1fr;
}

.grid_1_2{
	grid-template-columns:1fr 2fr;
}

.grid_1_1{
	grid-template-columns:1fr 1fr;
}

.grid_3_1{
	grid-template-columns:3fr 1fr;
}

.grid_1_3{
	grid-template-columns:1fr 3fr;
}

.grid_1_1_1{
	grid-template-columns:1fr 1fr 1fr;
}

.grid_1_1_1_1{
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid, .grid_2_1, .grid_1_2, .grid_1_1, .grid_3_1, .grid_1_3, .grid_1_1_1, .grid_1_1_1_1{
	display:grid;
	grid-gap:var(--grid-gap);
	place-items:stretch stretch;
}

.grid{
	place-items:start stretch;
	place-content:start start;
}

.grid_2_1 img, .grid_1_2 img, .grid_2_2 img, .grid_3_1 img, .grid_1_3 img, .grid_1_1_1 img, .grid_1_1_1_1 img{
	max-width:100%;
}

.double_gap{
	grid-gap:calc(var(--grid-gap) * 2);
}

.triple_gap{
	grid-gap:calc(var(--grid-gap) * 3);
}


.spacer{
	height:calc(var(--grid-gap));
	width:calc(var(--grid-gap));
}

.double_spacer{
	height:calc(var(--grid-gap) * 2);
	width:calc(var(--grid-gap) * 2);
}

.triple_spacer{
	height:calc(var(--grid-gap) * 3);
	width:calc(var(--grid-gap) * 3);
}


.gap_top{
	margin-top:var(--grid-gap);
}



figure{
	overflow:hidden;
	position:relative;
	height:0px;
	padding-top:56%;
	//width:90%;
	box-sizing:border-box;
	margin:0px auto;
	transition:all 0s;
	min-height:250px;
}
figure > div{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	box-sizing:border-box;
}

figure > div > canvas{
	height:100%;
}

figcaption{
	font-size:.9rem;
}

.figure_column, .figure_citation_column{
	position:relative;
}



tr{
	vertical-align:top;
}

td{
	padding:5px;
}

ul, ol{
	padding-left:35px;
}

footer{
	background:rgba(var(--theme-color-dark),.8);
	color:rgba(255,255,255,.6);
	margin-top:calc(var(--grid-gap) * 2);
	padding:75px 0px;
	font-size:.9rem;
	backdrop-filter: blur(var(--glass-blur));
	border-top:solid rgba(var(--theme-color-dark),.85)) 1px;
}

footer a{
	color:rgba(255,255,255,.6);
}

footer a:hover{
	color:rgb(var(--tertiary-color));
	filter:none;
}

footer h6{
	color:rgba(255,255,255,.6);	
}

#footer_grid{
	place-items:center center;
	place-content:center center;
}

#footer_logo{
	opacity:.5;
	height:36px;
	display:inline-block;
	transition:opacity .5s;
}

#footer_logo:hover{
	opacity:.9;
}

#media_icons{
	display:grid;
	grid-template-columns:repeat(5,auto);
	grid-gap:20px;
	place-content:center start;
	place-items:center start;
}

#media_icons img{
	display:inline-block;
	opacity:.5;
	max-height:32px;
	max-width:32px;
	transition:opacity .5s;
}

#media_icons img:hover{
	opacity:.9;
}

#contact_icon{
	opacity:.5;
	height:.75rem;
	display:inline-block;
}

#contact_icon:hover{
	opacity:.9
}

.details{
	display:none;
	margin-left:15px;
}

.details_wrapper[data-open='open'] .details{
	display:block;	
}


.portrait{
	padding-top:100%;
	background:url('/img/Hudson.jpg') 50% 15%;
	background-size:cover;
	border-radius:100%;
}