/*Columnanrir eru með jafna hæð þrátt fyrir meira content í main en sidebörum*/


/*Container er div sem fer um allt innihad síðunnar*/
.container{
	text-align: center;	
}
/*Wrapper fer bara um hluti síðunnar sem ég vill að séu undir áhrifum flex*/
.wrapper{
	display: flex;
}
/*Headerinn og footerinn þurfa ekki að vera flex því að þeir eiga alltaf að vera 100% af breidd skjásins */
header{
	min-width: 100%;
	background-color: yellow;
	height:40px;
}
footer{
	min-width: 100%;
	background-color: yellow;
	height:40px;

}

/*Þetta er ekki mobile first-layout, hérna læt ég main vera stærstann og hina tvo vera jafn stóra við hliðar hans.
Ekki þarf að stilla order hérna því að röðin er rétt í default HTMLinu*/
main{
	text-align: left;
	padding:10px;
	flex:5;
	background-color: green;
}
aside{
	flex:1;
	background-color: blue;
}
nav{
	flex:1;
	background-color: blue;
}
/*Hér breytir mediaquery CSSinu þegar viðeigandi stærð er náð*/
@media only screen and (max-width: 48em){
	/*Breyti flæði flex til þess að hvert element sé 100% breidd,
	sömu niðurstöðu væri samt líklega hægt að ná með min-width:100%*/
	.wrapper{
		 flex-flow: row wrap;
	}
	/*Breyti röð elementanna til þess að þeir séu í réttri röð skv. verkefnalýsingu*/
	main{
		flex:1 100%;
		order:0;
	}
	aside{
		flex:1 100%;
		order:2;
	}
	nav{
		flex:1 100%;
		order:1;
	}

}