* { box-sizing:border-box; }
body {
	height:100vh;
	font-family:'Open Sans',sans-serif;
	margin:0; padding:0;
}
h1, h2 { letter-spacing:-0.05em; margin:1em; color:#040; }
header img { display:block; height:60px; margin:0 auto; }
header p { color:#040; font-size:1.4em; text-align:center; }
nav { background:#829300; color:white; }
nav ul { list-style-type:none; padding:0 1em; }
nav li { display:inline-block; }
nav a {
	padding:0.2em;
	display:inline-block;
	color:white;
	text-decoration:none;
	line-height:2em;
	height:100%; width:100%;
}
nav a:hover { background:rgba(255,255,255,0.2); }
article {
	border-radius:1em;
	padding:0.5em;
	box-shadow:0 3px 4px rgba(0,0,0,0.2);
}
article img { display:block; max-width:100%; }
.author, time { font-size:0.8em; color:#444; }
footer {
	background:#829300;
	color:white;
	padding:1em;
	font-size:0.8em;
}

@media screen and (min-width:600px) {
	header img { display:inline-block; vertical-align:middle; }
	header p { display:inline; vertical-align:middle; margin:0 1em }
	nav a { padding:0.5em; }
	main { width:80vw; }
	article { padding:2em; margin:2em; }
}