/* CSS Document */
*{
	margin:0;
	padding:0;
	background-color:black;
}


header#canvas {
			height:50vw;
			width:40vw;
			background-color: gainsboro;
			margin:0vw auto 0 auto;
}
		
		main {
			width:82%;
			height:35%;
			margin-top:8%;
			margin-left:9%;
			float:left;
	
		}
		
		
			article {
				width:82.5%;
				height:66%;
				margin-top:9%;
				margin-left:8.5%;
				align-content: center;
			}

					figure{
						width:97%;
						height:19.5%;
						float:left;
						margin-top:1.8%;
						margin-left:1.5%;
					}

						section {
							height:16%;
							width:100%;
							margin-top:9%;
						}

/* CSS COLOR CLASSES */

.yellow {
	background-color: #F7E710;
}
		.yellow:hover{
			background-color:#F190B1;
		}


.white{
	background-color:#FDFDFC;
	margin-top:6.2%;
}

		.white:hover{
			background-color:#F7E710;
		}
.green{
	background-color: #9EC95B;
}

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

.pink{
	background-color: #F190B1;
}

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

.orange{
	background-color:#FFC102;
}

		.orange:hover{
			background-color:#272727;
		}
.black{
	background-color:#272727;
}

		.black:hover{
			background-color:#FFC102;
		}

.red{
	background-color:#E4280D;
}

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

.limegreen{
	background-color:#B0CB00;
	height:26%;
}

		.limegreen:hover{
			background-color:#272727;
		}

.darkblue{
	background-color:#1A3890;
	height:9.5%;
	margin-top:-9.5%;
}

		.darkblue:hover{
			background-color:lightpink;
		}

/* "FOOTER" */

footer#darkgray{
	height:3vw;
	width:40vw;
	background-color:darkgray;
	margin:0vw auto;
	box-shadow: 0 0 20px #333;
}