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

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

html, body {
	height: 100%;
}

body {
	font: 18px Rockwell, "Courier Bold", Georgia, serif;
	background: white;
	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; }

h1 {
	text-align: center;
	color: darkgrey;
}

p {
	text-align: center;
}

.odstavec-logo {
	margin-top: 15em;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
  }


/*fixna pozicia paticky */  
footer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.1rem;
	height: 4em;
	font-size: small;
  }

/* 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%; }
}