/*css reset */


* {
	padding: 0;
	margin:0;
}

section{
	width: 12vw;
	height: 100vh;
	float: left;
}

article{
	width: 12vw;
	height: 12vh;
	float: left;
}

/*here are css3 animation*/

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

@keyframes blink{
	0% {opacity: 0.2;}
	100% {opacity: 1;}
}	

	.blink{
		animation-name: blink;
		animation-duration: 2s;

	}

	.delay-black{
		animation-delay: 2s;
	}
	.delay-green{
		animation-delay: 3s;
	}
	.delay-blue{
		animation-delay: 4s;
	}


	.fade-in{
		animation-name: fade-in;
		animation-duration: 2s;
		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*/

section.red {
	
	background-color:red; 
}

section.orange {

	background-color:orange; 
}

section.yellow {
	
	background-color:yellow; 
}

section.green {

	background-color:green; 
}

section.cyan {
	
	background-color:cyan; 
}

section.blue {

	background-color:blue; 
}

section.purple {
	
	background-color:purple; 
}

section.magenta {
	
	background-color:magenta; 
}

.black{
background-color: black;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}