@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE STYLES DESIGNED AND BUILT WITH LOVING CARE -=-=-=
=-=-=-=- ENTIRELY BY HAND JUST FOR YOU BY IAN BESLER -=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

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

	* {
		margin: 0;
		padding: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	html,body,main {
		width: 100%;
		height: 100%;
	}

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

	section {
		width: 12.5%;
		height: 100vh;
		float: left;
	}

		h3 {
			font-size: 4vw;
			transform: rotate(90deg)translateX(5vw);
			white-space: nowrap;
		}

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

.none {
	background-color: none;
}

.black {
	background-color: #000;
}

.gray {
	background-color: #aaa;
}

.white {
	background-color: #fff;
}

.red {
	background-color: #f00;
}

.orange {
	background-color: #ffa500;
}

.yellow {
	background-color: #ff0;
}

.green {
	background-color: #0f0;
}

.cyan {
	background-color: #0ff;
}

.blue {
	background-color: #00f;
}

.purple {
	background-color: #800080;
}

.magenta {
	background-color: #f0f;
}