/* CSS RESET*/
* {
	margin: 0;
	padding: 0;
}
body{
	background-color: black
}
#canvas{
	width: 100vw;
	height: 6.5vw;
	margin-top: 150px;
	margin-left: 150px;
}


section {
	width: 900px;
	height: 1100px;
	background-color: #1f274c;
}
article {
	width: 400px;
	height: 1000px;
}
figure {
	width: 300px;
	height: 900px;
}
figcaption {
	width: 200px;
	height: 800px;
}
summary {
	width: 100px;
	height: 700px;
}


.orange-l {
	float: left;
	background-color: #c64a24;
}
.green-l {
	float: left;
	background-color: #7dae41;
}
.yellow-l {
	float: left;
	background-color: #ecc417;
}
.red-l {
	float: left;
	background-color: #c74b4b;
}


.orange-r {
	float: right;
	background-color: #c64a24;
}
.green-r {
	float: right;
	background-color: #7dae41;
}
.yellow-r {
	float: right;
	background-color: #ecc417;
}
.red-r {
	float: right;
	background-color: #c74b4b;
}



/*HERE ARE MY PSEUDOCLASSES FOR USER INTERACTION */

section:hover {
	background-color: black;
}


.orange-l:hover {
	background-color: blue;
}
.green-l:hover {
	background-color: red;
}
.yellow-l:hover {
	background-color: purple;
}
.red-l:hover {
	background-color: green;
}


.orange-r:hover {

	background-color: blue;
}
.green-r:hover {

	background-color: red;
}
.yellow-r:hover {

	background-color: purple;
}
.red-r:hover {

	background-color: green;
}