/* css talks to html tags */

body{background: #a9d6a9;}

header{
	height: 20%; 
	width: 100%; 
	background: #68a568;
	}

	nav { 
	height: 15%;
	background: #d3ead3;
	}
	
/* 1 em + 16px */
header h1{ 
	font-size: 4em; 
		}

article {
	float: left;
	height: 50%;
	width: 100%;
	background: #68a568;
	}

	section {
		float: left;
		height: 90%;
		width: 40%;
		background: #d5e5d5;
		margin: 2% 3% 1% 3%; /* top, right, bottom, left */
		padding: 0% 1% 0% 1%;
		}
	
@media screen and (max-width: 1600px)
{body p { font-size: 2em;}

@media screen and (max-width: 1000px)
{body p { font-size: 1em;}

@media screen and (max-width: 600px)
{body p { font-size: 1em;}

@media screen and (max-width: 287px)
{body p { font-size: 1em;}