body{
	font-family: "Montserrant", system-ui,san-sarif;
	font-size: 120%;
	line-height: 1.3em;
	background-color: hsl(193, 24%, 21%); /*#(000000) -> hex color format, rgb  =  red# green# blue#, or can just be a 3 digit number. Higher number = brighter  hsla  = (hue# saturation# lightness#) after the 3 digits on rgb or hsl you can add an 'a' value 0<x<1 to change opacity*/
	color: white;
	margin: 0; /*leftmargin now 0*/
	}
header{
	background-color:hsla(193,45%,45%,.5);
	min-height: 15vh; /*vh = viewport height*/
}
h1{
	margin-top: 0; /*changes top margin*/
	margin-left: 1rem; /*rem is based on paragraph, its relative*/
	margin-right: 1rem;
	padding-top: 1em;
	text-align: center;
}
main{
	margin: 1em;
}
table.ft{
	border: 1px solid #aaa;	
	/*border-spacing: .5rem;*/
	border-collapse: collapse; /*get rid of cell spacing*/
}
/*tr.even-data{ /*by class
	background-color: hsl(0,0%,100%,.15);
}
*/

/*tr:nth-child(odd){ /*better way to stripe by row
	background-color: hsl(0,0%,100%,.15);
}
*/
.ft tr>td:nth-child(even){ /*columns, of the ft, for every td in the tr, stripe evens*/
	background-color: hsl(0,0%,100%,.15);
}
.ft td{
	text-align: center;
}
.ft th:nth-child(1){
	text-align: left;
}


table.ft th, table.ft td{ /*Could aslo do .ft*/
	border: 1px solid #999;
	padding: .4rem;
	width: 5rem;
}
footer{
	padding: 1em;
}	
/a{
	color: hsl(118, 71%, 64%); /*Changes color of just 'a' elements*/
}


/* Hyperlink color changing functions*/
a:link {color: hsl(118, 71%, 64%)} /*unvisited*/
a:visited {hsl(1, 0%, 66%)} /*visited*/
a:hover {color: hsl(237, 55%, 64%)} /*mouse hover*/
a:active{color: hsl(0, 25%, 50%)} /*mouse clicked and held*/