@charset "UTF-8";
/* CSS Document */

/*-- 
    ____.              _______   
    |    | _________    \      \  
    |    |/  _ \__  \   /   |   \ 
/\__|    (  <_> ) __ \_/    |    \
\________|\____(____  /\____|__  /*/


* {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}

header#canvas {
	width: 52vw;
	height: 60vw;
	margin: 19% auto 0 auto;
}

section {
	margin-top: 6px;
	margin-left: 10px;
	width: 100%;
	height: 100%;
	color: #2A2C34
}

article.first-row {
	float: left;
	margin-top: 15%;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #BDBFCF;
}

article.second-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7F3F02;
}

article.third-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #687086;
}

article.fourth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D5C362;
}

article.fifth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.sixth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #964B3C;
}

article.seventh-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B9BFD1;
}

article.eighth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D4C2BF;
}

article.ninth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #414656;
}

article.tenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #2A2C34;
}

article.eleventh-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B9BFD1;
}

article.twelfth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B0ACC2;
}

article.thirteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #626571;
}

article.fourteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D4C2BF;
}

article.fifthteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.sixteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #3D4352;
}

article.seventeenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D5C362;
}

article.eigthteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.nineteenth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B0ACC2;
}

article.twentieth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.twentyfirst-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #3D4352;
}

article.twentysecond-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #964B3C;
}

article.twentythird-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B9BFD1;
}

article.twentyfourth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D4C2BF;
}

article.twentyfifth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.twentysixth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #A1A2BB;
}

article.twentyseventh-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.twentyeighth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #2A2C34;
}

article.twentyninth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.thirtieth-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #B9BFD1;
}

article.thirtyfirst-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #D4C2BF;
}

article.thirtysecond-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #7C8190;
}

article.thirtythird-row {
	float: left;
	margin-left: 18%;
	width: 61%;
	height: 2.5%;
	background-color: #2A2C34;
}


figure {
	width: 4.55%;
	height: 100%;
	float: left;
}

.black {
	background-color: #2A2C34;
}
	
.grey {
	background-color: #AEAEAE;
}

	.grey:hover {
	background-color: white;
	}

.black {
	background-color: #2A2C34;
}

	.black:hover {
	background-color: white;
	}

.wood {
	background-color: #934A35;
}

	.wood:hover {
	background-color: purple;
	}

.white {
	background-color: #D4C2B6;
}
	
	.white:hover {
	background-color: royalblue;
	}

.darkgrey {
	background-color: #626572;
}

	.darkgrey:hover {
	background-color: pink;
	}

.lighgrey {
	background-color: #8A8E96;
}

	.lightgrey:hover {
	background-color: #BF7D5B;
	}

.yellow {
	background-color: #D6C15D;
}

	.yellow:hover {
	background-color: #33CFF0;
	}

.lightyellow {
	background-color: #D2BD61;
}

	.lightyellow:hover {
	background-color: #33CFF0;
	}

.aliceblue {
	background-color: #B3B9CC;
}

	.aliceblue:hover {
	background-color: #FF00CC;
	}
.pewter {
	background-color: #838FA0;
}

	.pewter:hover {
	background-color: #FF00CC;
	}

.smokewhite {
	background-color: #D5CEC6;
}

	.smokewhite:hover {
	background-color: #E5B21D;
	}

.lightblue {
	background-color: #B9BFD1;
}

	.lightblue:hover {
	background-color: #FF6EFF;
	}

.shadow {
	background-color: #424756;
}
	
	.shadow:hover {
	background-color: #419056;
	}

.whitesmoke {
	background-color: #B0ACC2;
}

	.whitesmoke:hover {
	background-color: #FFD3F8;
	}

.slategrey {
	background-color: #3D4353;
}

	.slategrey:hover {
	background-color: #650A0A;
	}

.dimgrey {
	background-color: #3D4352;
}

	.dimgrey:hover {
	background-color: #214FC6;
	}
.iron {
	background-color: #4B4E5D;
}

	.iron:hover {
	background-color: #A1818B;
	}


.steel {
	background-color: #A1A2BB;
}

	.steel:hover {
	background-color: #FF4681;
	}

.palesmoke {
	background-color: #B5B2BD
}
	.Palesmoke:hover {
	background-color: #FF4704;
	}