/* css reset */
*{

	margin: 0;
	padding: 0;
	color: #000;
}


/* color classes */

.blue {
	background-color: dodgerblue;
}


.green{

	background-color: yellowgreen;
}

.darkBlue{
	background-color: #004080;

}

.purple {

	background-color: slateblue;
}

.yellow {
	background-color: yellow;
}

.orange {
	background-color: orange;
}

.pink {
	background-color: #b82e8a;
}

.red {
	background-color: #ac2020;
}

/* canvas */
main#canvas {
	width: 68.4vw;
	height: 45.5vw;
	margin: 5.6vh auto 0 auto; 
}

/* html5 semantic tags */

section {

	width: 50%;
	height: 50%;
	float: left;
}

article {

	width: 95%;
	height: 60%;
	

}

figure {

	width: 90%;
	height: 50%;
	

	float: left;
}

/* html5 semantic tags specific id */

article#topLeft {

	margin-top: 26.5%;
	margin-left: 5%;
}

article#topRight {
	margin-top: 26.5%;
}

article#botLeft {
	margin-left: 5%;
}


/* figure with id */

figure#topLeft {

	margin-top: 22%;
	margin-left: 10%;
}

figure#topRight {
	margin-top: 22%;
}

figure#botLeft {
	margin-left: 10%;
}


/* final inner quadrilateral */

figure#tLeft {

	margin-top: 13%;
	margin-left: 50%;
	width: 52%;
	height: 40%;
}


figure#tRight {
	margin-top: 13%;
	width: 52%;
	height: 40%;
}


figure#bLeft {
	margin-left: 50%;
	width: 52%;
	height: 40%;
}

figure#bRight {
	margin-right: 40%;
	width: 52%;
	height: 40%;
}