/* CSS RESET*/
* {
	margin: 0;
	padding: 0;
}
body{
	background-color: black
}
#canvas{
	width: 100vw;
	height: 6.5vw;
	margin-top: 150px;
	margin-left: 150px;
}
section {
	width: 150px;
	height: 700px;
	float: left;
}
article {
	width:100px;
	height:600px;
	margin-top: 50px;
	margin-left: 25px;
}
figure {
	width: 15px;
	height: 582px;
	background-color: white;
	float: left;
	margin-top: 8px;
	margin-left: 8px;
}

.yellow {
	background-color: #f7fd37;
}
.black {
	background-color: #242625;
}
.red {
	background-color: #ff5058;
}
.green {
	background-color: #1cd357;
}
.purple {
	background-color: #925090;
}
.cyan {
	background-color: #a3c3e9;
}


#green {
	background-color: #00bf9c;
}
#purple {
	background-color: #9e7cd3;
}
#yellow {
	background-color: #fbff2f;
}
#blue {
	background-color: #204fa1;
}
#orange {
	background-color: #ffae42;
}
#red {
	background-color: #fd3a66;
}


#red-f {
	background-color: #ff6082;
}
#cyan-f{
	background-color: #c2ecfc;
}
#orange-f{
	background-color: #fea525;
}
#pink-f{
	background-color: #ffecf5;
}
#black-f{
	background-color: #252e29;
}
#yellow-f{
	background-color: #fff832;
}


 /*HERE ARE MY PSEUDOCLASSES FOR USER INTERACTION */

 .yellow:hover {
	background-color: purple;
}
.black:hover {
	background-color: white;
}
.red:hover {
	background-color: green;
}
.green:hover {
	background-color: red;
}
.purple:hover {
	background-color: yellow;
}
.cyan:hover {
	background-color: orange;
}


#green:hover {
	background-color: red;
}
#purple:hover {
	background-color: yellow;
}
#yellow:hover {
	background-color: purple;
}
#blue:hover {
	background-color: darkorange;
}
#orange:hover {
	background-color: cyan;
}
#red:hover {
	background-color: green;
}


#red-f:hover {
	background-color: green;
}
#cyan-f:hover {
	background-color: orange;
}
#orange-f:hover {
	background-color: cyan;
}
#pink-f:hover {
	background-color: yellowgreen;
}
#black-f:hover {
	background-color: white;
}
#yellow-f:hover {
	background-color: purple;
}