*{
	margin:0;
	padding: 0;
}
body{
	background-color:none;
}

		main#canvas{
		width:38vw;
		height:90vh;
		}

		section{
			width:14%;
			height:75.6%;
			position: absolute}

		article{
			width:15.85%;
			height:75.6%;
			position: absolute;
			margin-left: 18.3vw

		}
		nav{
			width:75.33%;
			height:90%;
			position: absolute;}

		figure{
			width:75.30%;
			height:90%;
			position: absolute;
			margin-left: 3.1vw}

		mark{
			width:67.2%;
			height:88%;
			position:absolute;}

		footer{
			width:67.2%;
			height:10%;
			position:absolute;
			margin-left: 7vw}
		}
		figcaption.red{
			width:100%;
			height:20%;
			display:inline-block;
			margin-right:5vw;
		}
		section.purple{
			width:65%;
			height:88%;
			position:absolute;
			margin-left: 3.5vw;
		}
		mark.red{
			width:50%;
			height:87%;
			position:absolute;}

		section.red{
			width:33%;
			height:76.5%;
			position:absolute;
			margin-left: 6.5vw;
		}




	.yellow {background-color: #ffcc33;}
	.black {background-color: black;}
	.red {background-color: #cc6666;}
	.green {background-color: #66cc33;}
	.purple {background-color: #ffcc33;}
	.cyan {background-color: #333366;}
	.pink {background-color: pink;}
	.orange {background-color: #cc6633;}
	.navy {background-color: navy;}
	.teal {background-color: teal;}

	/*here are my pseudo classes for user interaction */

	.yellow:hover {background-color: black;}
	.black:hover {background-color: yellow;}
	.red:hover {background-color: green;}
	.green:hover {background-color: red;}
	.purple:hover {background-color: #333366;}
	.cyan:hover {background-color: purple;}
	.pink:hover {background-color: orange;}
	.orange:hover {background-color: pink;}
	.navy:hover {background-color: teal;}
	.teal:hover {background-color: navy;}