/* CSS Reset ---------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* Fonts ------------- */

@font-face {
	font-family: "LibreCaslonCondensed";
	src: url("../fonts/LibreCaslonCondensed/LibreCaslonCondensed-Regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "LibreCaslonCondensed";
	src: url("../fonts/LibreCaslonCondensed/LibreCaslonCondensed-Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "LibreCaslonCondensed";
	src: url("../fonts/LibreCaslonCondensed/LibreCaslonCondensed-Bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
}

/* Styles ------------- */

html		{ height: 100%; }
body 		{ background: rgb(255, 251, 99); box-sizing: border-box; color: #000; font: 20px/1.4 'LibreCaslonCondensed', monospace; height: 100%; margin: 0; }
p			{ margin-bottom: 20px; }
#container	{ position: relative; top: 50%; transform: translateY(-50%); width: 600px; margin: 0 auto; }

a 			{ color: rgb(0, 0, 0); text-decoration: underline; font-weight: normal; }
a:hover 	{ color: rgb(0, 0, 255); }

h1			{ display: block; background: transparent url("../images/namemark.svg") no-repeat 0 0; background-size: auto 18px; height: 18px; text-indent: -9999px; margin-bottom: 40px; }
.intro 		{ font-size: 48px; line-height: 1.1; letter-spacing: -0.5px; }
.italic		{ font-style: italic; }
.footer		{ font-size: 12px; font-style: italic; }


/* Break points ------------------ */

@media screen and (max-width: 640px) {

body		{ font-size: 18px; line-height: 1.4; }
#container	{ margin: 0; position: relative; top: auto; left: auto; transform: none; width: auto; padding: 32px 20px; }
.intro		{ font-size: 36px; line-height: 1.2; }
.footer		{ line-height: 1.6; }
}