body {
			font-family: Arial;
			color: #333;
		}
		
		header, footer {
			text-align: center;
			padding: 4px 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) {
	
			/***** Layout rules go in here ****/
			#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) {
	
		/***** Maximum sized layout rules go in here ****/
			
			#container {
				width: 1020px;
				margin: auto;
			}
			
			main {
				/* changes the proportion of nav to main*/
				flex:3;
				/*turns main into flexbox*/
				display: flex;
			}
			
			main article:first-of-type {
				margin-right: 20px;
			}
		}