:root {
	--logo-gap:		1rem;
}

@import url('https://fonts.googleapis.com/css?family=Lato');

/*** Header ***/
body			{ margin: 0; }
body, input[type=email], textarea	{ background-color: rgb(245, 248, 250); }
header			{ display: flex; align-items: center; flex-wrap: wrap; }
header img		{ height: 3rem; margin: var(--logo-gap); padding-right: var(--logo-gap); margin-right: 0; border-right: 1px solid darkblue; vertical-align: top; }
h1				{ color: darkblue; margin: 0; font-family: sans-serif; letter-spacing: -0.03em; margin: var(--logo-gap); }

main			{ margin: 1rem 1.5rem; }
h2, h3, p, figcaption, dt, dd, label, ul	{ font-family: 'Lato', sans-serif; }
p, ul, address, figure	{ max-width: 40rem; }
figure			{ margin: 0; margin-bottom: 1rem; padding: 1rem; }
p, figcaption	{ line-height: 1.5; }
dd, li			{ line-height: 1.3; }
li				{ margin-bottom: 0.5em; }
dd				{ text-align: justify; }

h2				{ margin: 2rem 0 1rem; color: #11B; font-size: xx-large; font-weight: normal; }
h3				{ margin: 1rem 2rem 0; color: blue; font-size: x-large; }
section			{ margin: 0 1rem; column-width: 17em; column-count: 3; column-gap: 1em; }

h2 + p, section, address	{ border-left: thick solid #88F; padding-left: 1rem; margin-left: 1rem; }
address			{ font-family: monospace; font-style: normal; font-size: large; }
cite			{ margin: 0 4rem; font-family: monospace; padding-left: 5ex; text-indent: -5ex; display: block; font-style: normal; }

fieldset, figure, header, section dl, .Headshot	{ background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
section dl	{ padding: 1em; margin: 0.5rem 0; display: inline-block; }
section dt	{ color: #45C; font-size: 1.5em; border-bottom: 1px solid #DEF; padding-bottom: 0.5ex; margin-bottom: 0.5ex; }
section dd	{ margin-left: 0; }

p, label	{ font-size: large; }
ul			{ font-size: large; }
figure		{ font-size: x-large; }
figure img	{ max-width: 80%; }
figcaption	{ font-size: large; line-height: 1.5; margin-top: 0.5em; }

fieldset	{ min-width: 0; max-width: 30em; margin: 2rem auto; padding: 0 1rem; border: none; }
legend		{ font-family: sans-serif; font-size: x-large; margin: 1rem 0; float: left; }
button,
input[type=email],
textarea	{ font-size: large; font-family: sans-serif; display: block; width: 100%; padding: 0.5em; margin: 1rem 0; box-sizing: border-box; }
input,
textarea	{ box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24); border: none; }

code		{ background-color: #E8E8E8; padding: 0.2em 0.5em; border-radius: 0.5em; }
.Headshot	{ float: right; margin: 1em; width: 50%; }

/*** Footer ***/
footer			{ display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; font-size: min(1.5em, 4vw); box-shadow: 0 100vh 0 100vh white, 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); background-color: white; }
addr			{ color: hsl(0, 0%, 53%); margin-block-end: 1em; font-size: max(1.2vw, 0.5em); text-align: center; font-family: sans-serif; flex-basis: 100%; }
addr > a		{ color: inherit; }
footer > dl		{ break-inside: avoid; }
footer dt		{ font-size: 0.9em; margin-block-end: 0.35em; color: #11B; text-transform: uppercase; letter-spacing: 0.1em; }
footer dd		{ font-size: 0.8em; margin-inline-start: 0; }