html {
	font-family: sans-serif;
	background: #eee;
	padding: 1rem;
}

body {
	max-width: 960px;
	margin: 0 auto;
	background: white;
}

h1 {
	font-family: serif;
	color: #377ba8;
	margin: 1rem 0;
}

a {
	color: #377ba8;
}

hr {
	border: none;
	border-top: 1px solid lightgray;
}

nav {
	background: lightgray;
	display: flex;
	align-items: center;
	padding: 0.5rem;
}

nav h1 {
	flex: auto;
	margin: 0;
}

nav h1 a { 
	text-decoration: none; 
	padding: 0.25rem 0.5rem; 
}

nav ul { 
	display: flex; 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}

nav ul li a, nav ul li span, header .action { 
	display: block; 
	padding: 0.5rem; 
}

nav ul li a.button{
	-webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.content { 
	padding: 0 1rem 1rem; 
}

.content > header { 
	border-bottom: 1px solid lightgray; 
	display: flex; 
	align-items: flex-end; 
}

.content > header h1 { 
	flex: auto; 
	margin: 1rem 0 0.25rem 0; 
}

.flash { 
	margin: 1em 0; 
	padding: 1em; 
	background: #cae6f6; 
	border: 1px solid #377ba8; 
}

.post > header { 
	display: flex; 
	align-items: last baseline; 
	font-size: 0.85em; 
}

.comment > header { 
	display: flex; 
	align-items: last baseline; 
	font-size: 0.85em; 
}

.post > header > div:first-of-type { 
	flex: auto; 
}

.post > header h1 { 
	font-size: 1.5em; 
	margin-bottom: 0; 
}

.about { 
	color: slategray; 
	font-style: italic; 
}

.post .body { 
	white-space: pre-line; 
}

.content:last-child { 
	margin-bottom: 0; 
}

.content form { 
	margin: 1em 0; 
	display: flex; 
	flex-direction: column; 
}

.content label { 
	font-weight: bold; 
	margin-bottom: 0.5em; 
}

.content input, .content textarea { 
	margin-bottom: 1em; 
}

.content textarea { 
	min-height: 12em; 
	resize: vertical; 
}	

input.danger { 
	color: #cc2f2e;
}

input[type=submit] { 
	align-self: start; 
	min-width: 10em; 
}
