/* CSS RESET */

	* {
	margin: 0;
	padding: 0;
	} 


	body {
		background-color: yellowgreen;
	}

	section {
		width: 12.4vw;
		height: 100vh;
		float: left;
		font-family: "Arial Black";
		font-size: 30px;
		color: white;
		text-align: center;

	}



/* CSS ANIMATIONS */

	@keyframes fade-in {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	
	.fade-in {
		animation-name: fade-in;
		animation-duration: 1s;
		animation-fill-mode: backwards;
	}

	.fade-two {
		animation-delay: 1s;
	}

	.fade-three {
		animation-delay: 2s;
	}

	.fade-four {
		animation-delay: 3s;
	}

	.fade-five {
		animation-delay: 4s;
	}

	.fade-six {
		animation-delay: 5s;
	}

	.fade-seven {
		animation-delay: 6s;
	}

	.fade-eight {
		animation-delay: 7s;
	}



	/* 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;
	}