*, *::after, *::before{  /* * means to select everything. 
							:: means they are psuedo elements; */
	box-sizing: border-box;
}

[class^='grid-col-'] { /*wanted to keep navigation bar at top 
	horizontily aligned with eachother rather than vertically*/
	float: left;
	text-align: center;
}

.legend{
	width:30%;
}


.grid-col-2of10{ /*class must be seen with a . on the html */
	width: 33.33%;
}

.grid-col-3of10{
	width: 33.33%;
}

.grid-col-5of10{
	width: 50%;
}

.grid-row::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 87em){ /*foun break point so resizes accordingly  get 
	pixel at the top of the page divide by 16 to get rem*/
	.grid-col-2of10{
		width: 50%;
	}
	.grid-col-5of10{
		width: 100%;
	}

	.grid-col-3of10{
		width: 50%;
	}
}

@media (max-width: 67em){ 
		body{
		margin-right: 2rem;
		margin-left: 2rem;
		}
		.grid-col-2of10{
		width:100%;
		}
		.grid-col-3of10{
		width:100%;
		}
		.legend{
		width:50%;
		}


}