@charset "UTF-8";


*{
	margin: 0;
  padding: 0;
 
}

ul {
	list-style-type: none;
	text-align: center;
	font-size: 2vw;
}
li {
		display: inline-block;
		margin: 0 0.5vw;
}

header#canvas {
	width: 50vw;
	height: 50vw;
	margin: auto;
}
section {float: left;
}

section.skyblue{
		width: 50%;
		height: 50%;
}
figure.yellow {
	width: 85%;
	height: 50%;
	float: right;
	top: 50%;
	position: relative
}

section.blue{
	width: 50%;
	height: 50%;
}

section.green{
	width: 50%;
	height: 50%;
	float: right;
}

section.purple { 
	width: 50%;
	height: 50%;
	float: right;
}
figure.orange{
	width: 85%;
	height: 50%;
	float: none;
	position:relative;
	top: 50%;
}
figure.pink {
	width: 85%;
	height: 50%;
	float: right;
}
figure.red2{
	width: 85%;
	height: 50%;
	float: none;
}

figure.purple2{
	width: 70%;
	height: 25%;
	position: relative;
	float: right;
	top: 25%;
}

figure.blue2{
	width: 70%;
	height: 25%;
	position: relative;
	float:left;
	top: 25%;
}

figure.green2{
	width: 70%;
	height: 25%;
	position: relative;
	float: right;
	bottom: 50%;
}

figure.skyblue2{
	width: 70%;
	height: 25%;
	position: relative;
	float: left;
	bottom: 50%;
}

figure.red{
	width: 49%;
	height: 12%;
	position: relative;
	float: right;
	top: 13.5%;
}

figure.pink2{
	width: 49%;
	height: 12%;
	position: relative;
	float: left;
	top: 13.5%;
}

figure.orange2{
	width: 49%;
	height: 12%;
	position: relative;
	float: right;
	bottom: 75%;
}

figure.yellow2{
	width: 49%;
	height: 12%;
	position: relative;
	float: left;
	bottom: 75%;
}
.skyblue{ background: #369FD9;
}

.green{background: #5FA946;}

.purple{background: #474D91;
}
.blue{background: #295099;}

.gray {background: gray;

}
.yellow {background: #FBE619;
}
.red {background: #C53222;
}
.pink {background: #BC327F;
}

.orange {background: #E39F20;
}
/*2nd round of colors*/

.skyblue2{ background: #369FD9;
}

.green2{background:#5FA946;
}

.purple2{background: #474D91;
}
.blue2{background: #295099;
}

.red2 {background: #C53222;
}
.pink2 {background: #BC327F;
}

.orange2 {background: #E39F20;
}

.yellow2 {background: #FBE619;
}
/* Hovor*/

.skyblue:hover { background: #295099;
}

.green:hover {background: #474D91;
}

.purple:hover {background: #369FD9;
}
.blue:hover {background: #5FA946;

}
.yellow:hover {background: #C53222;
}
.red:hover {background:#FBE619;
}
.pink:hover {background: #E39F20;
}

.orange:hover {background:#BC327F;
}

.skyblue2:hovor { background: #5FA946;
}

.green2:hover {background:#474D91;
}

.purple2:hover {background:#369FD9 ;
}
.blue2:hover {background: #C53222;
}

.red2:hover {background: #295099;
}
.pink2:hover {background: #E39F20;
}

.orange2:hover {background: #FBE619;
}

.yellow2:hover {background: #BC327F;
}