* { box-sizing:border-box; }
body {
	margin:0; padding:0;
	background:white;
	font:20px Spartan,sans-serif;
	font-weight:300;
	line-height:1.7em;
}
a { color:inherit; }
header,aside,section,blockquote,footer { padding:1em; }
header {
	background:url(images/stainless-faucet.jpg) center/cover no-repeat;
	color:white;
	min-height:80vh;
	text-shadow:1px 1px 1px black;
}
h1, h2, h3 { letter-spacing:-0.02em; }
h1 {
	font-size:1em;
	font-variant:all-small-caps;
	letter-spacing:0.1em;
}
h1 img { height:1.3em; vertical-align:bottom; }
header p { padding:0.5em; max-width:700px; text-shadow:none; }
header p:first-of-type { background:black; color:#ddd; }
header p:nth-of-type(2) { background:#eee; color:#333; }
#what { padding:1em; font-size:0.8em; background:white; }
#definition {
	font-family:'Libre Baskerville',Times,serif;
	padding:0.5em;
	box-shadow:0 3px 4px rgba(0,0,0,0.2);
}
blockquote {
	max-width:800px;
	margin:0 auto;
	text-align:center;
	font-size:1.2em;
}
blockquote q {
	display:block;
	font-family:'Libre Baskerville',Times,serif;
}
section:nth-of-type(2n+1) {
	background:#476388 url(images/bubbles-dark.jpg) top/200px repeat-x;
	color:white;
}
#supporters {
	max-height:220px;
	overflow:hidden;
	box-shadow:inset 0 0.5em 1em rgba(0,0,0,0.1);
}
#supporters ul { animation:scroll-vert 16s linear 2s infinite forwards; }
@keyframes scroll-vert {
	from { transform:translatey(0); }
	to   { transform:translatey(calc(-100% + 220px)); }
}
footer { font-size:0.8em; color:gray; }

@media screen and (min-width:700px) {
	header,section,footer { padding:3em; }
	h1 { font-size:1.5em; }
	blockquote { padding:3em; }
	#what {
		float:right;
		margin:1em;
		box-shadow:0 3px 4px rgba(0,0,0,0.2);
		max-width:400px;
	}
	#supporters { max-height:none; }
	#supporters ul { list-style-type:none; animation:none; }
	#supporters li { display:inline-block; margin:0.5em; }
}