/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=- STYLES BY IAN BESLER =-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

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

* {
	margin: 0;
	padding: 0;
}

/* -=-=-=-=-=-=-=-=-=-=
-=-=-= HTML BODY =-=-=-
=-=-=-=-=-=-=-=-=-=- */

body {
	width: 100vw;
	height: 100vh;
}

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

body header {
	width: 600px;
	height: 600px;
}

	body header h1 {
		text-align: center;
		padding-top: 45%;
	}

body nav {
	width: 400px;
	height: 400px;
}

	body nav h2 {
		text-align: center;
		padding-top: 46%;
	}

body article {
	width: 300px;
	height: 300px;
}

	body article h3 {
		text-align: center;
		padding-top: 46%;
	}

body section {
	width: 200px;
	height: 200px;
}

	body section h4 {
		text-align: center;
		padding-top: 45%;
	}

body figure {
	width: 100px;
	height: 100px;
}

	body figure h5 {
		text-align: center;
		padding-top: 42%;
	}

body footer {
	width: 50px;
	height: 50px;
}

	body footer h6 {
		text-align: center;
		padding-top: 35%;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= CSS FLOAT PROPERTY -=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

.left {
	float: left;
}

.right {
	float: right;
}

.inlineblock {
	display: inline-block;
}

.inline {
	display: inline;
}

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

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: limegreen;
}

.blue {
	background-color: cyan;
}

.purple {
	background-color: magenta;
}