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

/*Shuffle (for R. Mutt)*/

body {background-color: #000000}

/*canvas*/
main#canvas {width: 50vw;
			height:	60vh;
			margin: 0 auto 0 auto;}

figcaption {width: 50vw;
			margin: 0.5vw auto 0 auto;
			font-size: 12pt;
			text-align: left;
			font-family: Helvetica;
			color: white;
			float: center;}

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

article {width: 100%;
		height: 100%;
		margin-top: auto;
		margin-left: auto;
		float: left;}

figure {width: 80%;
		height: 12%;
		margin-top: auto;
		margin-left: 10%;
		float: left;}

figure.yellow-long {width: 80%;
					height: 12%;
					margin-top: auto;
					margin-left: 9%;
					border-style: solid;
					border-width: 7px;
					border-color: #97c350;
					float: left;}

figure.black-long {width: 80%;
					height: 12%;
					margin-top: auto;
					margin-left: 9%;
					border-width: 7px;
					border-style: solid;
					border-color: #f190b3;
					float: left;}

figure.red {width: 100%;
			height: 12%;
			margin-top: auto;
			margin-left: auto;
			float: left;}

figure.green {width: 100%;
			height: 12%;
			margin-top: auto;
			margin-left: auto;
			float: left;}

figure.blue {width: 100%;
			height: 12%;
			margin-top: auto;
			margin-left: auto;
			float: left;}

/*article*/
/*color class*/
.yellow-box {background-color: #f0e702;}
.black-long {background-color: #232323;}
.yellow-long {background-color: #f8b100}
.white-box {background-color: #efefef}
.red {background-color: #e52c0d;}
.green {background-color: #b6cf04;}
.blue {background-color: #133c8b;}

/*pseudo-class*/
.yellow-box:hover {background-color: green;}
.black-long:hover {background-color: pink;}
.yellow-long:hover {background-color: purple}
.white-box:hover {background-color: brown}
.red:hover {background-color: blue;}
.green:hover {background-color: red;}
.blue:hover {background-color: orange;}