/* 
                 _..--+~/@-~--.
             _-=~      (  .   "}         _   __  __   _
          _-~     _.--=.\ \""""    )\/) /_) )_  / _  /_) )\ ) 
        _~      _~       \ \_\    (  ( / / (__ (__/ / / (  (                
       _~     _~          '--'
      =      _=               :      :       ____                   
___  |      ;                            ____ '~--.~.
     ;      ;  MAEGAN BY MAEGAN             _____  } |
  ___=       \ ___ __     __..-...__           ___/__/__
     :        =_     _.-~~          ~~--.__
_____ \         ~-+-~                   ___~=_______
     ~@#~~ == ...______ __ ___ _--~~--_
                                                    =
*/

*{
	margin: 0;
	padding: 0;
}

header#canvas {
	width: 64vw;
	height: 60vw;
	background-color: white;
	margin: 8vw auto 10vw auto;
}

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

section {
	width: 1.75%;
	height: 100%;
	background-color: black;
	float:left;
}

article {
	width: 0.5%;
	height: 100%;
	float: left;
}

figure {
	width: 8.9%;
	height: 100%;
}


.black {
	background-color: black;
}

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

.cyan {
	background-color: lightskyblue;
	width: 0.5%;
}

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

.pink {
	background-color: #E593CA;
}

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

.gold {
	background-color: #c3ba3c;
	width: 0.4%;
}

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

.grey {
	background-color: #b9c3c8;
	width: 1.4%;
}

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

.white {
	background-color: white;
	width: 1.3%;
}

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

.navy {
	background-color: #264d73;
	width: 1.5%;
}

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

.slate {
	background-color: slategrey;
	width: 1.4%;
}

.slate:hover {
	background-color: darkgrey;
}