/* 
                 _..--+~/@-~--.
             _-=~      (  .   "}         _   __  __   _
          _-~     _.--=.\ \""""    )\/) /_) )_  / _  /_) )\ ) 
        _~      _~       \ \_\    (  ( / / (__ (__/ / / (  (                
       _~     _~          '--'
      =      _=               :      :       ____                   
___  |      ;                            ____ '~--.~.
     ;      ;  MAEGAN BY MAEGAN             _____  } |
  ___=       \ ___ __     __..-...__           ___/__/__
     :        =_     _.-~~          ~~--.__
_____ \         ~-+-~                   ___~=_______
     ~@#~~ == ...______ __ ___ _--~~--_
                                                    =
*/
* {
	margin: 0;
	padding: 0;
}

header#canvas {
	width: 50.5vw;
	height: 59vw;
	margin: 18.5% auto 0 auto;
}

section {
	margin-top: 4px;
	margin-left: 8px;
	width: 100%;
	height: 100%;
}

article.row-one {
	float: left;
	margin-top: 14.4%;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #BDBEC8;
}

article.row-two {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #964B3C;
}

article.row-three {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #687086;
}

article.row-four {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #D5C362;
}

article.row-five {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #7C8190;
}

article.row-six {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #964B3C;
}

article.row-seven {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.3%;
	background-color: #B9BFD1;
}

article.row-eight {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #D4C2BF;
}

article.row-nine {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.15%;
	background-color: #414656;
}

article.row-ten {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2%;
	background-color: #2A2C34;
}

article.row-eleven {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.4%;
	background-color: #B9BFD1;
}

article.row-twelve {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2%;
	background-color: #B0ACC2;
}

article.row-thirteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #626571;
}

article.row-fourteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2%;
	background-color: #D4C2BF;
}

article.row-fifthteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #7C8190;
}

article.row-sixteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #3D4352;
}

article.row-seventeen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #D5C362;
}

article.row-eigthteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #7C8190;
}

article.row-nineteen {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #B0ACC2;
}

article.row-twenty {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2%;
	background-color: #7C8190;
}

article.row-twentyone {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #3D4352;
}

article.row-twentytwo {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #964B3C;
}

article.row-twentythree {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #B9BFD1;
}

article.row-twentyfour {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #D4C2BF;
}

article.row-twentyfive {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #7C8190;
}

article.row-twentysix {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #A1A2BB;
}

article.row-twentyseven {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #7C8190;
}

article.row-twentyeight {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #2A2C34;
}

article.row-twentynine {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #7C8190;
}

article.row-thirty {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #B9BFD1;
}

article.row-thirtyone {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.2%;
	background-color: #D4C2BF;
}

article.row-thirtytwo {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #7C8190;
}

article.row-thirtythree {
	float: left;
	margin-left: 17.4%;
	width: 60.8%;
	height: 2.1%;
	background-color: #2A2C34;
}


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

.beige {
	background-color: #D0C8BE;
}

	.beige:hover {
	background-image: linear-gradient(lime, mediumaquamarine);
	
  	transition: 0.3s;
	}

.grey {
	background-color: #BDBEC8;
}

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

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

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

.sienna {
	background-color: #964B3C;
}

	.sienna:hover {
	background-color: red;
	}

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

.darkgrey {
	background-color: #626571;
}

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

.lightgrey {
	background-color: #7C8190;
}

	.lightgrey:hover {
	background-color: #50BFE6;
	}

.yellow {
	background-color: #D5C362;
}

	.yellow:hover {
	background-color: #AAF0D1;
	}

.aliceblue {
	background-color: #B3B9CC;
}

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

.floralwhite {
	background-color: #B5B0BB;
}

	.floralwhite:hover {
	background-color: #A7F432;
	}

.lightblue {
	background-color: #B9BFD1;
}

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

.dimgray {
	background-color: #414656;
}
	
	.dimgray:hover {
	background-color: #414656;
	}

.whitesmoke {
	background-color: #B0ACC2;
}

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

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

	.slategrey:hover {
	background-color: #214FC6;
	}

.steel {
	background-color: #A1A2BB;
}

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