*{
   margin: 0;
   padding: 0;
}

header#canvas {
	width: 45.3vw;
	height:33.38vw;
	margin-left:24vw;
	margin-top: 5vw;
	
}

section.red {
	width:5.4vw ;
	height:15.5vw ;
}

section.yellow {
	width: 3.03vw;
	height: 18vw ;
}

article#block-one  {
	margin-left: 2.3vw;
	display: inline-block;
}
section.orange {
	width: 4.3vw;
	height: 3.9vw;
	
}

section.pink {
	width: 6.6vw;
	height:10vw;
}

article#block-two {
	display: inline-block;
	margin-right:2vw;
	
}
section.purple{
width: 2.2vw ;
height: 4.5vw ;
margin-left: 2vw;
}

section.blue{
width: 6.5vw ;
height: 4.2vw;
}

section.cyan{
width: 4.41vw ;
height: 3.9vw;
margin-left: 2vw;
}

section.darkseagreen{
width: 2.2vw;
height: 4.5vw;
margin-left: 2vw;
}

section.hotpink{
width: 4.4vw;
height: 2.58vw;
margin-left: 2vw;
}

/*CSS COLOR*/

.seashell {
	background-color: seashell;
}

.red {
	background-color:black;
}

.yellow {
	background-color: black;
}

.orange {
	background-color: black;
}

.pink {
	background-color: black;
}

.purple {
	background-color: black;
}

.blue {
	background-color: black;
}

.cyan {
	background-color: black;
}

.darkseagreen {
	background-color: black;
}

.hotpink {
	background-color: black;
}



.seashell:hover {
	background-color: firebrick;
}

.red:hover {
	background-color:orange;
}

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

.orange:hover {
	background-color: orange;
}

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

.purple:hover {
	background-color: fuchsia;
}

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

.cyan:hover {
	background-color: cyan;
}

.darkseagreen:hover {
	background-color: sienna;
}

.hotpink:hover {
	background-color: deeppink;
}