/*-----------'||\   /||`                                            
              ||\\.//||                  ''                         
              ||     ||   '''|.  '||''|  ||  `||''|,   '''|.  ('''' 
              ||     ||  .|''||   ||     ||   ||  ||  .|''||   `'') 
             .||     ||. `|..||. .||.   .||. .||  ||. `|..||. `...' 
                                                                            
                     
             '||'''|.                                   
              ||   ||               ''                  
              ||   || .|''|, (''''  ||  .|''|, `||''|, //////////// 
              ||   || ||..||  `'')  ||  ||  ||  ||  || ************ 
             .||...|' `|...  `...' .||. `|..|| .||  ||.////////////
                                            ||          
                                         `..|'--*/

/* CSS RESET */

* {
		margin: 0;
		padding: 0;
	}

/* SEMANITC TAGS */
body {
	padding-top:20vh;
	background-color: #ffffe6;
}

main#canvas {
	width: 48vw;
	height: 35vw;
	background-color: antiquewhite;
	margin-left: auto;
  	margin-right: auto;
}

figure {
	width: 1.5vw;
	height:35vw;
	display: inline-block;
	float:left;
}

.maroon {
	background-color:maroon;
}

.tomato {
	background-color: tomato;
}

.blue {
	background-color:blue;
}

.ogreen {
	background-color: green;
}

.orange {
	background-color:orange;
}

.purple {
	background-color:purple;
}

.fuchsia {
	background-color: fuchsia;
}

.black {
	background-color:black;
}

.white {
	background-color:white;
}

.teal {
	background-color:teal;
}

.yello {
	background-color: yellow;
}

figcaption{
	margin: 5vw auto 0 auto;
    font-size: 10pt;
    text-align: center;
    font-family: "Avenir", Arial, sans-serif;
}


/*--HOVER---*/

.maroon:hover {
	background-color:navy;
}

.tomato:hover {
	background-color: lime;
}

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

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

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

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

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

.black:hover {
	background-color:whitesmoke;
}

.white:hover {
	background-color:black;
}

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

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