body{
	font-family:Arial;
	color:#333;
}

header,footer{
	text-align:center;
	padding:40px 0;
	background:#DADADA;
}
nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	border-top:2px solid #083073;
}
nav ul li a{
	display:block;
	background:#EDBB03;
	padding:20px 10px;
	text-align:center;
	text-decoration: none;
	text-transform: uppercase;
	color:#fff;
	font-weight:bold;
	border-bottom:2px solid #083073;
}
main{
	display:block;
	background-color:#f2f2f2;
	padding:20px;
}
@media only screen and (min-width:600px){
	
	#container{
		padding:20px;
		display:flex;
		flex-wrap:wrap;
	}
	
	header,footer{
		flex:100%;
	}
	
	nav{ 
	flex:1;
	background-color:#F7E5A3;
	}
	
	main{
		flex:2;
	}
}

@media only screen and (min-width: 1020px) {
    #container {
        width: 1020px;
        margin: auto;
    }

    main {
        flex: 3;
        display: flex;
    }

    main article:first-of-type {
        margin-right: 20px;
    }
}