/* Centered masthead, centered content column, Helvetica, de-bulleted nav/tags.
   No colors, no font sizes. */

body {
	box-sizing: border-box;
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 1rem;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Nav and tags are <ul> for accessibility, not because they read as lists.
   Keep the markup, drop the marker. Scoped so prose bullets are untouched. */
header nav ul,
#tags {
	list-style: none;
	padding: 0;
}

header nav li,
#tags li {
	display: inline;
}

header h1,
header nav {
	text-align: center;
}

header nav li + li {
	margin-left: 1.5em;
}

header {
	margin-bottom: 3rem;
}

/* The task screenshots are 1024px wide; the column is 640px. Without this they
   overflow and force horizontal scrolling. */
img {
	max-width: 100%;
	height: auto;
}