@charset "utf-8";
/* CSS Document */

main#canvas {
	width: 40vw;
	height: 40vw;
	background-color: red;
}

section {width: 25%;
height: 25%;
float:left;}

article {width: 25%; height: 25%; float:left;}

.orange {background-color: #fb681a}
	.orange:hover {background-color: palevioletred}

.green {background-color: #2a6060}
.green:hover {background-color:blue}

.purple {background-color: #6d7cdb}
.purple:hover {background-color: forestgreen}

.yellow {background-color: #e9e17c}
.yellow:hover {background-color:mediumpurple}

.brown {background-color: #561f01}
.brown:hover {background-color:darkmagenta}

.dark-orange {background-color: #dc3f08}
.dark-orange:hover {background-color:springgreen}

.navy {background-color: #2b233b}
.navy:hover {background-color:tan}

.strong-yellow {background-color: #d7dc03}
.strong-yellow:hover {background-color:magenta}