* {
	margin: 0;
	padding: 0;
}

header {
	position: fixed;
	top: -100vh;
	left: -100vw;
}

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

	ol {
		width: 100%;
		height: 10%;
		list-style-type: none;
	}

	li {
		width: 6.25%;
		height: 100%;
		float: left;
	}

	div {
		width: 80%;
		margin: 45% auto 0 auto;
		height: 5%;
		background-color: #000;
			animation-name: spin;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
	}

	ol:nth-child(odd) li:nth-child(odd) div {
		animation-duration: 5s;
	}

	ol:nth-child(even) li:nth-child(odd) div {
		animation-duration: 15s;
	}

	ol:nth-child(odd) li:nth-child(even) div {
		animation-duration: 10s;
	}

	ol:nth-child(even) li:nth-child(even) div {
		animation-duration: 30s;
	}


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


	@keyframes spin-and-expand {
		0%		{transform: rotate(0deg)scaleX(1);}
		50%		{transform: rotate(180deg)scaleX(4);}
		100%	{transform: rotate(360deg)scaleX(1);}
	}