/* general */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	height: 100%;
}

body {
	font: 18px Rockwell, "Courier Bold", Georgia, serif;
	background: #dbdbdb;
	padding: 1em;
}

body,
a {
	color: #fff;
}

ul {
	list-style: none;
	padding-left: 0;
}

header, nav, article, aside, footer {
	padding: 1.2em;
	border-radius: .3em;
	margin: 5px;
	text-align: center;
}

header  { background: gray; }
nav     { background: #f6be00; }
article { background: gray; }
aside   { background: #eb70b1; }
footer  { background: gray; }


/* FLEX */
main {
	display: flex;
	flex-flow: row wrap;
}

main > * { 
	flex: 1;
}

nav {
	order: 1;
}

article {
	order: 2;
	flex: 3;
}

aside {
	order: 3;
}


/* MEDIA QUERIES */
@media ( max-width: 800px ) {
	article { order: 1; flex: 1 100%; }
	nav     { order: 2; }
	aside   { order: 3; }
}

@media ( max-width: 600px ) {
	nav, aside { flex: 1 100%; }
}


footer {
	font-size: small;
}