body{ /* sets the font, background color and font color (unless 
	indicated otherwise*/
	padding: 2rem;
	font-family: Arial, sans-serif;
	background-color:rgb(200, 145, 100);
	color:rgb(77, 47, 14);
}
article { /*article border, spacing and text alingment*/
	text-align: left;
	margin: 2rem 0; 
	padding: 2rem; 
	border: 0.5em;
	border-style: solid;
	border-color:rgb(77, 47, 14);
}

h1{ /*specific sizes for each font using rem which is set by the
browser used by users */
	font-size: 5rem;
	color:white;
}

h2{
	font-size: 3rem;
	color:white;
}

h3{
	font-size: 2rem;
	color:white;
}

nav a {
	display: inline-block; /*elements not on the same line are now on the same line*/
	background-color:rgb(77, 47, 14);
	color:white;
	font-size: 1.25rem; /* rem means times the size set by web browser*/
	text-decoration:none;
	padding: 0 5em;
	margin: 0 0.25em; /*first value is top and bottom, second value is right and left. only 
	seperated by space  if 4 values, top, right, bottom, left would be the elements*/
}
nav a:hover, nav a:focus { /*changes color of the navigation when it is
	hovered over*/
	color:rgb(200, 125, 255);
	background-color: rgb(100, 100, 200);
}

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

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


figure{ /* puts border around the image and caption.*/
	margin-left: 0;
	padding: 3rem;
	border: .1em;
	border-style:solid;
	border-color:rgb(77, 47, 14);
}
figcaption{
	font-style: italic;
	font-size: 0.8em;
}

ul{ /*changes style of bullets to rings rather than solid circles */
	list-style-type: circle;
	padding:1rem;
}

ol{
	padding:1rem;
}

a {
	font-weight: bold;
	padding: 1rem;
}

table, td, th { /*puts border around table*/
 padding: 1.5rem; /*enlarges table to easier to see. else it 
 was too small */
 border: 0.1em;
 border-style:solid;
 border-color:rgb(77, 47, 14); 
 margin-bottom: 2em;
}

form{ /*login bar at bottom is coloured white instead of brown so 
it is easier to read */
	background-color:white;
	color:black;
	padding: 1rem;
}