/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- STYLES DESIGNED AND BUILT BY IAN BESLER -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

/* =-=-=-=-=-=-=-=-=-=-
-=-=-= CSS RESET -=-=-=
=-=-=-=-=-=-=-=-=-=- */

	* {
		margin: 0;
		padding: 0;
	}

	a:link {
		color: #00f;
	}

	a:hover {
		background-color: #ff0;
	}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- HTML5 SEMANTIC TAGS -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* =-=-=-=-=-=-=-=-=
=-=-=- HEADER =-=-=-
-=-=-=-=-=-=-=-=- */

header {
	background-color: lightgray;
	padding: 2%;
	border-bottom: 0.1em solid #000;
	font-size: 1.5em;
}

	h1,h2,h3,h6 {
		font-family: sans-serif;
		font-weight: normal;
	}

/* =-=-=-=-=-=-=-=-=
=-=-=- SECTION =-=-=-
-=-=-=-=-=-=-=-=- */

	h3 {
		padding: 2% 0 0 2%;
	}

/* =-=-=-=-=-=-=-=-=
=-=-=- FIGURE =-=-=-
-=-=-=-=-=-=-=-=- */

	figure {
		width: 50vw;
		margin: 5vh auto;
	}

/* =-=-=-=-=-=-=-=-=
=-=-=- FOOTER =-=-=-
-=-=-=-=-=-=-=-=- */

footer {
	background-color: lightgray;
	padding: 2%;
	font-size: 2em;
	border-top: 0.1em solid #000;
}

	footer img {
		width: 1em;
	}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- CSS NAMED COLOR CLASSES -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	.red {
		background-color: red;
	}
	
	.orange {
		background-color: orange;
	}
	
	.yellow {
		background-color: yellow;
	}
	
	.green {
		background-color: green;
	}
	
	.blue {
		background-color: blue;
	}
	
	.purple {
		background-color: purple;
	}

	.black {
		background-color: black;
	}