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

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

section{
	display: inline-block;	
	border: solid 1px #baa393;
}

article{
	display:inline-block;
	border: solid 1px #baa393;
}
section.violet {
	width: 50%;
	height: 100%;
	position: absolute;
}

article.layer2 {
	width: 92%;
	height: 92%;
	margin-top: 4%;
	margin-left: 4%;
	position: absolute;
	
}

article.layer3 {
	width: 83%;
	height: 83%;
	margin-top: 8.1%;
	margin-left: 8.25%;
	position: absolute;
}

article.layer4 {
	width: 75%;
	height: 75%;
	margin-top: 11.8%;
	margin-left: 11.8%;
	position: absolute;
}

article.layer5 {
	width: 66%;
	height: 66%;
	margin-top: 16.2%;
	margin-left: 16.3%;
	position: absolute;
}

article.layer6 {
	width: 57%;
	height: 57%;
	margin-top: 20.55%;
	margin-left: 20.55%;
	position: absolute;
}

article.layer7 {
	width: 48.5%;
	height: 48.5%;
	margin-top: 25%;
	margin-left: 25%;
	position: absolute;
}

article.layer8 {
	width: 39%;
	height: 39%;
	margin-top: 29.55%;
	margin-left: 29.55%;
	position: absolute;
}

article.layer9 {
	width: 30%;
	height: 30%;
	margin-top: 34.1%;
	margin-left: 34.1%;
	position: absolute;
}

article.layer10 {
	width: 22%;
	height: 22%;
	margin-top: 37.855%;
	margin-left: 37.855%;
	position: absolute;
}

article.layer11 {
	width: 13%;
	height: 13%;
	margin-top: 42.5%;
	margin-left: 42.5%;
	position: absolute;
}

article.layer12 {
	width: 5%;
	height: 5%;
	margin-top: 46.5%;
	margin-left: 46.3%;
	position: absolute;
}

/*Other*/
section.notwo {
	float: right;
	position: relative;
	width: 50%;
	height: 100%;
}

article.redtoo {
	width: 13%;
	height: 13%;
	margin-top: 42.5%;
	margin-left: 42.5%;
	position: absolute;
}

article.redorangetoo {
	width: 22%;
	height: 22%;
	margin-top: 37.855%;
	margin-left: 37.855%;
	position: absolute;
}

article.orangetoo {
	width: 30%;
	height: 30%;
	margin-top: 34.1%;
	margin-left: 34.1%;
	position: absolute;
}

article.orangetoo {
	width: 30%;
	height: 30%;
	margin-top: 34.1%;
	margin-left: 34.1%;
	position: absolute;
}

article.yelloworangetoo {
	width: 39%;
	height: 39%;
	margin-top: 29.55%;
	margin-left: 29.55%;
	position: absolute;
}

article.yellowtoo {
	width: 48.5%;
	height: 48.5%;
	margin-top: 25%;
	margin-left: 25%;
	position: absolute;
}

article.yellowgreentoo {
	width: 57%;
	height: 57%;
	margin-top: 20.55%;
	margin-left: 20.55%;
	position: absolute;
}

article.greentoo {
	width: 66%;
	height: 66%;
	margin-top: 16.2%;
	margin-left: 16.3%;
	position: absolute;
}

article.bluegreentoo {
	width: 75%;
	height: 75%;
	margin-top: 11.8%;
	margin-left: 11.8%;
	position: absolute;
}

article.bluetoo {
	width: 83%;
	height: 83%;
	margin-top: 8.1%;
	margin-left: 8.25%;
	position: absolute;
}

article.indigotoo {
	width: 92%;
	height: 92%;
	margin-top: 4%;
	margin-left: 4%;
	position: absolute;
}

article.violettoo {
	width: 5%;
	height: 5%;
	margin-top: 46.5%;
	margin-left: 46.3%;
	position: absolute;
}

/*COLORS*/
.violet {
	background-color: #3c2b72;
}

.indigo{
	background-color: #172971;
}

.blue{
	background-color: #0f4687;
}

.bluegreen{
	background-color: #143e57;
}

.green{
	background-color: #557745;
}

.yellowgreen{
	background-color: #6f913d;
}

.yellow {
	background-color: #f7cb44;
}

.yelloworange{
	background-color: #fb8d58;
}

.orange{
	background-color: #f86c53;
}

.redorange{
	background-color: #ea464f;
}

.red{
	background-color: #cf274b;
}

.redpurple{
	background-color: #7a1456;
}

.violet:hover {
	background-color: #7a1456;
}

.indigo:hover {
	background-color: #cf274b;
}

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

.bluegreen:hover{
	background-color: #f86c53;
}

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

.yellowgreen:hover{
	background-color: #f7cb44;
}

.yellow:hover {
	background-color: #6f913d;
}

.yelloworange:hover{
	background-color: #557745;
}

.orange:hover{
	background-color: #143e57;
}

.redorange:hover{
	background-color: #0f4687;
}

.red:hover{
	background-color: #172971;
}

.redpurple:hover{
	background-color: #3c2b72;
}