* { padding: 0; border: 0; margin: 0; }

html { background: #dcdcdc; }
body { margin: auto; max-width: 96rem; display: flex; flex-wrap: wrap; }

* { font-family: 'Verdana', sans-serif; }
*::selection { background: #786048; color: white; }
a { color: #656565; }

header img { width: 100%; }
header { margin-bottom: 2rem; }

main h1, main h2, main h3, main h4, main p, main table, footer p { margin: 1rem; }
main p, menu li { max-width: 48rem; }
main p { hyphens: auto; }

menu li { display: block; padding: .5rem; margin: .5rem; }
menu a { text-decoration: none; }
menu li.current, menu li:hover { background: #ffffff; }
menu li.current a, menu li:hover a { color: black; }

footer { color: #929291; }

body > * { flex-basis: 100%; }

header { order: 1; }
main { order: 2; }
menu { order: 3; }
footer { order: 4; }

@media(min-width: 64rem)
{
menu { order: 2; flex-basis: 25%; }
main { order: 3; flex-basis: 75%; }
}

.page-header h1 { font-weight: normal; font-size: 250%; }