/*layout*/
* {
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 35vw;
	height: 40vw;
	position: relative;
}

section{
	/*width: 2.38%;
	height: 100%;*/
	display: inline-block;
}

section.orng1 {
	width: 45%;
	height: 92%;
	position: absolute;
	top: 0vw;
	left: 0vw;
	/*z-index: -3;*/
}

section.orng2 {
	width: 45%;
	height: 92%;
    position: absolute;
    top: 0vw;
    right: 0vw;
	/*z-index: -3;*/
}

article.green1{
	width: 82%;
	height: 92%;
	position: absolute;
	top: 0vw;
	left: 0vw;
	/*z-index: -2;*/
}

article.green2{
	width: 82%;
	height: 92%;
    position: absolute;
    top: 0vw;
    right: 0vw;
	/*z-index: -2;*/
}

article.yellow1{
	width: 64%;
	height: 85%;
	position: absolute;
	top: 0vw;
	left: 0vw;
	/*z-index: -1;*/
}

article.yellow2{
	width: 64%;
	height: 85%;
    position: absolute;
    top: 0vw;
    right: 0vw;
	/*z-index: -1;*/
}

article.pink1{
	width: 45%;
	height: 77%;
	position: absolute;
	top: 0vw;
	left: 0vw;
	/*z-index: 0;*/
}

article.pink2{
	width: 45%;
	height: 77%;
    position: absolute;
    top: 0vw;
    right: 0vw;
	/*z-index: 0;*/
}

/*colors*/
.blue {
	background-color: #1d2959;
}

.orange {
	background-color: #c84f24;
}

.green {
	background-color: #7daf40;
}

.yellow {
	background-color: #edc913;
}

.pink {
	background-color: #ca4e4e;
}

.blue:hover {
	background-color: #FFA500;
}

.orange:hover {
	background-color: #1919ff;
}

.green:hover {
	background-color: #ff1919;
}

.yellow:hover {
	background-color: #660066;
}

.pink:hover {
	background-color: #004000;
}