@charset "UTF-8";
body{
	font-family: Arial, Helvetica, sans-serif;
	--headerfarbe: #77bc69;
	--asidefarbe: #A4C79A;
	--mainfarbe: #A4D29A;
	--navfarbe: #A4D79C;
	--footerfarbe: #C7F9CC;
	}
@media (min-width: 45em){
	.container {display: grid;
		grid-template-rows:140px 1fr 100px;
		grid-template-columns:25% 25% 25% 25%;}
	header { 
	grid-column-start:1;
	grid-column-end:5;
	grid-row-start:1;
	grid-row-end:2;
	padding: 1em;
	background-color: var(--headerfarbe);
	text-align: center;
	font-size: 2em;
	color: white !important;}
aside {
	grid-column-start:1;
	grid-column-end:2;
	grid-row-start:2;
	grid-row-end:3;
	background-color: var(--asidefarbe);
	font-size: 1.0em;
	padding: 2em;	}
main{
	grid-column-start:2;
	grid-column-end:4;
	grid-row-start:2;
	grid-row-end:3;
	background-color: var(--mainfarbe);
	font-size: 1.0em;
	padding: 2em;}
nav {
	grid-column-start:4;
	grid-column-end:5;
	grid-row-start:2;
	grid-row-end:3;
	background-color: var(--navfarbe);
	font-size: 1.0em;
	padding: 2em;	} 
footer{
	grid-column-start:1;
	grid-column-end:5;
	grid-row-start:3;
	grid-row-end:4;
	background-color: var(--footerfarbe);
	color: black;
	font-size: 1em;
	padding: 0.2em 0.2em 0.2em 1.5em;}
}
@media (max-width: 44em){
.container
	{display: flex;
	flex-direction: column;}
header{ 
	padding: 1em;
	background-color: var(--headerfarbe);
	text-align: center;
	font-size: 2em;
	color: white !important;}
aside{
	background-color: var(--asidefarbe);
	font-size: 1.0em;
	padding: 2em;}
main{
	background-color: var(--mainfarbe);
	font-size: 1.0em;
	padding: 2em;}
nav{
	background-color: var(--navfarbe);
	font-size: 1.0em;
	padding: 2em;}
footer{
	background-color: var(--footerfarbe);
	color: black;
	font-size: 1em;
	padding: 0.2em 0.2em 0.2em 1.5em;}
}