* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

html,body {
	width: 100%;
}

h1 {
	position: absolute;
	top: 340px;
	left: 0;
	width: 97vw;
	margin: 27.7px 0 0 27.7px;
}

figure {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	z-index: 0;
}

@keyframes rotate-one {
	0%		{transform: rotate(0deg);}
	100%	{transform: rotate(360deg);}
}

@keyframes rotate-two {
	0%		{transform: rotate(45deg);}
	100%	{transform: rotate(405deg);}
}

@keyframes rotate-three {
	0%		{transform: rotate(90deg);}
	100%	{transform: rotate(450deg);}
}

@keyframes rotate-four {
	0%		{transform: rotate(135deg);}
	100%	{transform: rotate(495deg);}
}

@keyframes rotate-five {
	0%		{transform: rotate(180deg);}
	100%	{transform: rotate(540deg);}
}

@keyframes rotate-six {
	0%		{transform: rotate(225deg);}
	100%	{transform: rotate(585deg);}
}

@keyframes rotate-seven {
	0%		{transform: rotate(270deg);}
	100%	{transform: rotate(630deg);}
}

@keyframes rotate-eight {
	0%		{transform: rotate(315deg);}
	100%	{transform: rotate(675deg);}
}
	
	figure svg {
		display: inline-block;
		width: 58px;
		margin: 27.7px 0 0 27.7px;
		animation-duration: 20s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		fill: none;
		stroke: #000;
		stroke-width: 10;
		stroke-linecap: round;
		stroke-miterlimit: 10;
	}

	.blue {
		stroke: #00f;
	}

		.zero-deg {
			transform: rotate(0deg);
			animation-name: rotate-one;
		}

			.zero-deg:hover {
				stroke: #00f;
			}

		.fortyfive-deg {
			transform: rotate(45deg);
			animation-name: rotate-two;
		}

			.fortyfive-deg:hover {
				stroke: #00f;
			}

		.ninety-deg {
			transform: rotate(90deg);
			animation-name: rotate-three;
		}

			.ninety-deg:hover {
				stroke: #00f;
			}

		.onethirtyfive-deg {
			transform: rotate(135deg);
			animation-name: rotate-four;
		}

			.onethirtyfive-deg:hover {
				stroke: #00f;
			}

		.oneeighty-deg {
			transform: rotate(180deg);
			animation-name: rotate-five;
		}

			.oneeighty-deg:hover {
				stroke: #00f;
			}

		.twotwentyfive-deg {
			transform: rotate(225deg);
			animation-name: rotate-six;
		}

			.twotwentyfive-deg:hover {
				stroke: #00f;
			}

		.twoseventy-deg {
			transform: rotate(270deg);
			animation-name: rotate-seven;
		}

			.twoseventy-deg:hover {
				stroke: #00f;
			}

		.threefifteen-deg {
			transform: rotate(315deg);
			animation-name: rotate-eight;
		}

			.threefifteen-deg:hover {
				stroke: #00f;
			}

@keyframes fade-in {
	0%		{opacity: 0;}
	100%	{opacity: 1;}
}

/*h1,h2,h3,section {
	animation: fade-in 2s 1;
	animation-fill-mode: backwards;
}*/

	div#spacer {
		height: 60vh;
	}

	h2 {
		animation-delay: 2s;
	}

	h3 {
		animation-delay: 3s;
	}

	h2,h3 {
		text-align: right;
		font-size: 18pt;
		color: #fff;
		background-color: #00f;
		width: 31.5vw;
		padding: 0.5em;
		margin: 2.5em 3.8em 0 auto;
		font-weight: normal;
		position: relative;
		z-index: 2;
	}

	section {
		color: #00f;
		margin: 1em;
		padding: 1em;
		position: absolute;
		top: 100vh;
		animation-delay: 4s;
		width: 80vw;
		column-count: 2;
		background-color: white;
		font-size: 18pt;
	}

	p:first-child {
		font-size: 30pt;
	}

	p {
		margin: 0 0 1em 0;
	}

/*
_____________________________
______ CSS3 ANIMATIONS ______
_____________________________
*/

@keyframes flashing-yellow {
	0% {background-color: transparent;}
	1% {background-color: rgba(255,255,0,1);}
	100% {background-color: transparent;}
}

.flashing-yellow {
	animation-name: flashing-yellow;
	animation-duration: 3s;
	animation-iteration-count: infinite;
		-moz-animation-name: flashing-yellow;
		-moz-animation-duration: 1.5s;
		-moz-animation-iteration-count: infinite;
		-ms-animation-name: flashing-yellow;
		-ms-animation-duration: 1.5s;
		-ms-animation-iteration-count: infinite;
		-o-animation-name: flashing-yellow;
		-o-animation-duration: 1.5s;
		-o-animation-iteration-count: infinite;
		-webkit-animation-name: flashing-yellow;
		-webkit-animation-duration: 1.5s;
		-webkit-animation-iteration-count: infinite;
}

mark {
	display: inline-block;
	color: white;
	padding: 0.2em;
}