*{
	margin: 0;
	padding: 0;
}

main#blankCanvas {
	width: 68.5vw;
	height: 68.5vw;
	margin: 1.5vh auto;
	background-color:#c5c4bf;
}

	section#canvas{
		width: 86%;
		height: 86%;
		margin-left: 7%;
			margin-top: 7%;
			float: left;
			background-color: red;
		
	}
		article{
			width:100%;
			height: 25%;
		}
			.row-1{
				background-color: blue;
			}
			.row-2{
				background-color: green;
			}
			.row-3{
				background-color:yellow;
			}
			.row-4{
				background-color:pink;
			}

			figure{
				width:25%;
				height:100%;
				float: left
			}
				.checker{
					width:25%;
					height:100%;
					float: left
				}
					header{
					width:25%;
					height:25%;
					float: left;
					}


/* CSS NAMED COLOR CLASSES*/

.yellow {
	background-color: #f0e885;
}

.blue {
	background-color: #6d7cdb;
}

.teal {
	background-color: #2a6062;
}

.orange {
	background-color: #fb5e11;
}

.indigo {
	background-color: #29203b;
}

.maroon {
	background-color: #501900;
}
.canary {
	background-color: #d1df03;
}
.redorange {
	background-color: #d23404;
}



/* CSS HOVER MODE*/

.yellow:hover {
	background-color: darkseagreen;
}

.blue:hover {
	background-color: darkmagenta;
}

.teal:hover {
	background-color: crimson;
}

.orange:hover {
	background-color: greenyellow;
}

.indigo:hover {
	background-color: lavender;
}

.maroon:hover {
	background-color: lightcoral;
}
.canary:hover {
	background-color: black;
}
.redorange:hover {
	background-color: mediumaquamarine;
}