body {
	background-color: #e6ffff;
	text-align: center;
	margin: 0 auto;
	font-family: Courier;
	width: 800px;
}

div.pixel {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #000000;
}
/* Row 1 */
div#r1c1 { animation: pixel1 4s;  background-color: maroon; }
div#r1c2 { animation: pixel2 4s;  background-color: maroon; }
div#r1c3 { animation: pixel1 4s;  background-color: maroon; }
div#r1c4 { animation: pixel3 4s;  background-color: darkgoldenrod; }
div#r1c5 { animation: pixel3 4s;  background-color: black; }
div#r1c6 { animation: pixel3 4s;  background-color: darkgoldenrod; }
div#r1c7 { animation: pixel4 4s;  background-color: maroon; }
div#r1c8 { animation: pixel2 4s;  background-color: purple; }
div#r1c9 { animation: pixel2 4s;  background-color: purple; }
div#r1c10 { animation: pixel2 4s;  background-color: purple; }

/* Row 2 */
div#r2c1 { animation: pixel5 4s;  background-color: maroon; }
div#r2c2 { animation: pixel3 4s;  background-color: maroon; }
div#r2c3 { animation: pixel2 4s;  background-color: darkgoldenrod; }
div#r2c4 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r2c5 { animation: pixel1 4s;  background-color: darkgoldenrod; }
div#r2c6 { animation: pixel2 4s;  background-color: darkgoldenrod; }
div#r2c7 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r2c8 { animation: pixel5 4s;  background-color: purple; }
div#r2c9 { animation: pixel5 4s;  background-color: purple; }
div#r2c10 { animation: pixel5 4s;  background-color: purple; }


/* Row 3 */
div#r3c1 { animation: pixel2 4s;  background-color: maroon; }
div#r3c2 { animation: pixel5 4s;  background-color: maroon; }
div#r3c3 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r3c4 { animation: pixel1 4s;  background-color: maroon; }
div#r3c5 { animation: pixel3 4s;  background-color: darkgoldenrod; }
div#r3c6 { animation: pixel5 4s;  background-color: darkgoldenrod; }
div#r3c7 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r3c8 { animation: pixel2 4s;  background-color: purple; }
div#r3c9 { animation: pixel2 4s;  background-color: purple; }
div#r3c10 { animation: pixel2 4s;  background-color: purple; }

/* Row 4 */
div#r4c1 { animation: pixel1 4s;  background-color: maroon; }
div#r4c2 { animation: pixel4 4s;  background-color: maroon; }
div#r4c3 { animation: pixel3 4s;  background-color: maroon; }
div#r4c4 { animation: pixel5 4s;  background-color: maroon; }
div#r4c5 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r4c6 { animation: pixel2 4s;  background-color: darkgoldenrod; }
div#r4c7 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r4c8 { animation: pixel1 4s;  background-color: purple; }
div#r4c9 { animation: pixel1 4s;  background-color: purple; }
div#r4c10 { animation: pixel1 4s;  background-color: purple; }


/* Row 5*/
div#r5c1 { animation: pixel5 4s;  background-color: maroon; }
div#r5c2 { animation: pixel2 4s;  background-color: maroon; }
div#r5c3 { animation: pixel1 4s;  background-color: darkgoldenrod; }
div#r5c4 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r5c5 { animation: pixel3 4s;  background-color: darkgoldenrod; }
div#r5c6 { animation: pixel1 4s;  background-color: darkgoldenrod; }
div#r5c7 { animation: pixel2 4s;  background-color: darkgoldenrod; }
div#r5c8 { animation: pixel5 4s;  background-color: purple; }
div#r5c9 { animation: pixel5 4s;  background-color: purple; }
div#r5c10 { animation: pixel5 4s;  background-color: purple; }

/* Row 6 */
div#r6c1 { animation: pixel4 4s;  background-color: maroon; }
div#r6c2 { animation: pixel2 4s;  background-color: maroon; }
div#r6c3 { animation: pixel1 4s;  background-color: maroon; }
div#r6c4 { animation: pixel4 4s;  background-color: darkgoldenrod; }
div#r6c5 { animation: pixel5 4s;  background-color: darkgoldenrod; }
div#r6c6 { animation: pixel3 4s;  background-color: darkgoldenrod; }
div#r6c7 { animation: pixel2 4s;  background-color: darkgoldenrod; }
div#r6c8 { animation: pixel1 4s;  background-color: purple; }
div#r6c9 { animation: pixel1 4s;  background-color: purple; }
div#r6c10 { animation: pixel1 4s;  background-color: purple; }



/* Row 7 */
div#r7c1 { animation: pixel1 4s;  background-color: maroon; }
div#r7c2 { animation: pixel2 4s;  background-color: maroon; }
div#r7c3 { animation: pixel3 4s;  background-color: maroon; }
div#r7c4 { animation: pixel4 4s;  background-color: maroon; }
div#r7c5 { animation: pixel5 4s;  background-color: maroon; }
div#r7c6 { animation: pixel1 4s;  background-color: maroon; }
div#r7c7 { animation: pixel2 4s;  background-color: maroon; }
div#r7c8 { animation: pixel3 4s;  background-color: purple; }
div#r7c9 { animation: pixel3 4s;  background-color: purple; }
div#r7c10 { animation: pixel3 4s;  background-color: purple; }



/* Row 8 */
div#r8c1 { animation: pixel1 4s;  background-color: maroon; }
div#r8c2 { animation: pixel2 4s;  background-color: maroon; }
div#r8c3 { animation: pixel4 4s;  background-color: maroon; }
div#r8c4 { animation: pixel3 4s;  background-color: maroon; }
div#r8c5 { animation: pixel5 4s;  background-color: maroon; }
div#r8c6 { animation: pixel2 4s;  background-color: maroon; }
div#r8c7 { animation: pixel3 4s;  background-color: maroon; }
div#r8c8 { animation: pixel1 4s;  background-color: purple; }
div#r8c9 { animation: pixel1 4s;  background-color: purple; }
div#r8c10 { animation: pixel1 4s;  background-color: purple; }

/* Row 9 */
div#r9c1 { animation: pixel1 4s;  background-color: maroon; }
div#r9c2 { animation: pixel2 4s;  background-color: maroon; }
div#r9c3 { animation: pixel4 4s;  background-color: maroon; }
div#r9c4 { animation: pixel3 4s;  background-color: maroon; }
div#r9c5 { animation: pixel5 4s;  background-color: maroon; }
div#r9c6 { animation: pixel2 4s;  background-color: maroon; }
div#r9c7 { animation: pixel3 4s;  background-color: maroon; }
div#r9c8 { animation: pixel1 4s;  background-color: purple; }
div#r9c9 { animation: pixel1 4s;  background-color: purple; }
div#r9c10 { animation: pixel1 4s;  background-color: purple; }

/* Row 10 */
div#r10c1 { animation: pixel1 4s;  background-color: maroon; }
div#r10c2 { animation: pixel2 4s;  background-color: maroon; }
div#r10c3 { animation: pixel4 4s;  background-color: maroon; }
div#r10c4 { animation: pixel3 4s;  background-color: maroon; }
div#r10c5 { animation: pixel5 4s;  background-color: maroon; }
div#r10c6 { animation: pixel2 4s;  background-color: maroon; }
div#r10c7 { animation: pixel3 4s;  background-color: maroon; }
div#r10c8 { animation: pixel1 4s;  background-color: purple; }
div#r10c9 { animation: pixel1 4s;  background-color: purple; }
div#r10c10 { animation: pixel1 4s;  background-color: purple; }





@keyframes pixel1 {
	0%{background-color: black;}
	50%{background-color: violet;}
	100%{background-color: purple;}
}

@keyframes pixel2 {
	0%{background-color: black;}
	50%{background-color: violet;}
	100%{background-color: silver;}
}

@keyframes pixel3 {
	0%{background-color: black;}
	50%{background-color: red;}
	100%{background-color: gold;}
}
@keyframes pixel4 {
	0%{background-color: black;}
	50%{background-color: red;}
	100%{background-color: maroon;}
}

a {
	width: 35%;
	background-color: gold;
	display: block;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #CCCCCC;
	color: #000000;
}

a:hover {
	background-color: #CCCCCC;
}