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

* {
	margin: 0;
	padding: 0;
}

/* --------------------------
---- HTML5 SEMANTIC TAGS ----
----------------------------*/

	body {
		text-align: center;
	}

/* --------------------------
---- USER INPUT FORM LABELS ----
----------------------------*/

	h1 {
		margin-top: 10vh;
	}

	h2 {
		margin-bottom: 10vh;
	}

	li {
		margin-bottom: 2vh;
	}

/* --------------------------
---- USER INPUT FORM LABELS ----
----------------------------*/

	input {
		display: block;
		margin: auto;
		padding: 0.5vh;
		color: black;
		font-weight: bold;
		border: 3px solid black;
		background-color: white;
	}

		input:hover {
			color: gray;
			border: 3px solid gray;
			background-color: black;
		}

		input:focut {
			background-color: yellow;
		}


/* --------------------------
---- CSS COLOR CLASSES ------
----------------------------*/

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.cyan {
	background-color: cyan;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: purple;
}

.magenta {
	background-color: magenta;
}