/*  \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / __  / / / / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \   /..\  ` ` \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
------------------' `---------- (    ) \|/ -----------' `------------------
 ,------------------------- _\___>  <__//` ------------------------------. 
 |/ / / / / / / / / / / / / >,---.   ,-'  / / / / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |  . \  \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / /  `. `. \   ., / / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \  |  `. | \||_ \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / / / `.  : |__||   / / / / / / / / / / / / /| 
 | \ \ \ \ \ \ \ \ \ \ \ \ \ \ \  __> `.,---'  \ \ \ \ \ \ \ \ \ \ \ \ \ | 
 |/ / / / / / / / / / / / / / /  |.--'\`.\  / / / / / / / / / / / / / / /| 
 `------------------------------ _\\   \`.| -----------------------------' 
------------------. ,------------ /|\ - |:| ----------. ,------------------
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ ' `    |:|  \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / / / / |:| / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \  |:/  \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / /  --.________,-_/  / / / / / | | / / / / / / / / /
 \ \ \ \ \ \ \ \ \| |\ \ \ \ \ ```-----' \ \ \ \ \ \ \| |\ \ \ \ \ \ \ \ \ 
/ / / / / / / / / | | / / / / / / / / / / / / / / / / | | / / / / / / / */

*{
	margin:0 ;
	padding:0 ;
	

}

header#canvas{
	width: 69.5vw;
	height:54.9vw;
	background-color: blue;
  margin: 5vw auto 0 auto;
}
   section{
   	width: 5.8823529%
   	height: 100%;
    float: left;
  }

   /*css named color classes*/

   .blond{
     background-color: rgb(255,238,188);
     width:6.4vw;
     height:54.9vw;
   }
     .blond:hover { 
     	background-color: rgb(110,100,76);
     }

   .purpletaupe{
     background-color: rgb(76,63,66);
     width:5.2vw;
     height:54.9vw;
   }
   .purpletaupe:hover { 
      background-color: rgb(219,208,171);
   }
     .purpletaupe{
     	background-color:white;
     }
   .peach{
     background-color: rgb(255,234,176);
     width:2.784vw;
     height:54.9vw;
   }
   .peach:hover { 
     	background-color: rgb(153,121,96);
     }

    .wenge{
     background-color: rgb(110,100,76);
     width:3.46vw;
     height:54.9vw;
   }
    .wenge:hover{
    	background-color: rgb(255,246,212);
    }
    .desertsand{
     background-color: rgb(219,208,171);
       width:3.6vw;
     height:54.9vw;
   }
    .lightgoldenrodyellow{
     background-color: rgb(255,246,212);
      width:6.4vw;
     height:54.9vw;
   }
     .chamoisse{
     background-color: rgb(153,121,96);
     width:3.0vw;
     height:54.9vw;


  }
  .chamoisse:hover { 
      background-color: rgb(76,63,66);
   
   }
     .wenge{
     background-color: rgb(110,100,76);
     width:3.46vw;
     height:54.9vw;
   }
   .wenge:hover { 
     	background-color: rgb(255,246,212);
}
     .lightgoldenrodyellow2{
     background-color:rgb(255,246,212);
     width:0.9vw;
     height:54.9vw;
}
    .lightgoldenrodyellow2:hover { 
      background-color: rgb(255,234,176);
}

     }
     .wenge{
     background-color: rgb(110,100,76);
     width:3.46vw;
     height:54.9vw;
   }
   .wenge:hover { 
     	background-color: rgb(255,246,212);
     } 

 }
     .chamoisse{
     background-color: rgb(153,121,96);
     width:3.0vw;
     height:54.9vw;


   }
    .chamoisse:hover { 
      background-color: rgb(76,63,66);
   }
   .lightgoldenrodyellow{
     background-color:rgb(255,246,212);
     width:6.4vw;
     height:54.9vw;
}
 .lightgoldenrodyellow:hover { 
      background-color: rgb(255,234,176);
   }
   .desertsand{
     background-color: rgb(219,208,171);
      width:3.6vw;
     height:54.9vw;
   }
   .wenge{
     background-color: rgb(110,100,76));
     width:3.46vw;
     height:54.9vw;
   }
   .peach{
     background-color: rgb(255,234,176);
     width:2.784vw;
     height:54.9vw;
   }
   .peach:hover { 
     	background-color:rgb(153,121,96);
     }
   .purpletaupe{
     background-color: rgb(76,63,66);
     width:5.2vw;
     height:54.9vw;
   }
   .purpletaupe:hover { 
      background-color: rgb(219,208,171);
 
   } .blond{
     background-color: rgb(255,238,188);
     width:6.4vw;
     height:54.9vw;
   }
     .blond:hover { 
     	background-color: rgb(110,100,76);
     }