/* CSS RESET*/
* {
	margin: 0;
	padding: 0;
}
body{
	background-color: black
}
#canvas{
	width: 100vw;
	height: 6.5vw;
	margin-top: 150px;
	margin-left: 150px;
}
section {
	width: 1000px;
	height: 1000px;
	background-color: #94a700;
}
article {
	width:1000px;
	height:200px;
}
figure {
	width:200px;
	height:200px;
}

.yellow-1-a {
	background-color: #f6b801;
	float: left;
}
.yellow-1-b {
	background-color: #f6b801;
	float: right;
}


.purple-2-a {
	background-color: #590328;
	float: left;
}
.purple-2-b {
	background-color: #590328;
	margin-left: 200px;
	float: left;
}
.purple-2-c {
	background-color: #590328;
	float: right;
}


.yellow-3-a {
	background-color: #f6b801;
	float: left;
}
.purple-3-b {
	background-color: #590328;
	margin-left: 200px;
	float: left;
}
.yellow-3-c {
	background-color: #f6b801;
	float: right;
}


.purple-4-a {
	background-color: #590328;
	float: left;
}
.purple-4-b {
	background-color: #590328;
	margin-left: 200px;
	float: left;
}
.purple-4-c {
	background-color: #590328;
	float: right;
}


.yellow-5-a {
	background-color: #f6b801;
	float: left;
}
.yellow-5-b {
	background-color: #f6b801;
	float: right;
}


/*HERE ARE MY PSEUDOCLASSES FOR USER INTERACTION */

section:hover {
	background-color: white;
}


.yellow-1-a:hover {
	background-color: white;
}
.yellow-1-b:hover {
	background-color: white;
}


.purple-2-a:hover {
	background-color: black;
}
.purple-2-b:hover {
	background-color: black;
}
.purple-2-c:hover {
	background-color: black;
}


.yellow-3-a:hover {
	background-color: white;
}
.purple-3-b:hover {
	background-color: black;
}
.yellow-3-c:hover {
	background-color: white;
}


.purple-4-a:hover {
	background-color: black;
}
.purple-4-b:hover {
	background-color: black;
}
.purple-4-c:hover {
	background-color: black;
}


.yellow-5-a:hover {
	background-color: white;
}
.yellow-5-b:hover {
	background-color: white;
}