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

*{
	margin:0 ;
	padding:0 ;
  text-align: center;

}
	header#canvas{
	width: 46.5vw;
	height:50vw;
	margin: 5vw auto 0 auto;
}

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

   /*css named color classes*/

   .deepskyblue3{
     background-color: deepskyblue;
     width:0.2vw;
     height:50vw;
   }
     .deepskyblue3:hover { 
     	background-color: orange;
     }

   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
     .hotpink:hover {
     	background-color: deepskyblue;
     }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue:hover { 
     	background-color: orange;
     }

    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
    .orange:hover{
    	background-color: black;
    }
    .deepskyblue{
     background-color: deepskyblue;
      width:0.47vw;
     height:50vw;
   }
    .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
     .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
     .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
     .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .black:hover { 
     	background-color: white;
     }
     .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw;  
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
   }
     .white:hover { 
     	background-color: hotpink;
     }
   .deepskyblue{
     background-color: deepskyblue;
      width:0.47vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw;  
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
    width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw
    }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
    }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }

   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
    }
    .deepskyblue2{
      background-color: deepskyblue;
      width:0.9vw; 
     height:50vw;
    }
    .deepskyblue2:hover { 
     	background-color: orange;
     }
    .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
    .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
    }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue2{
      background-color: deepskyblue;
      width:0.9vw; 
     height:50vw;
    }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:650vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
    }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
    .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
     .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw;  
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
    }
    .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw;  
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
    }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
     .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
     .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue2{
      background-color: deepskyblue;
      width:0.9vw; 
     height:50vw;
    }
    .white{
     background-color: white;
     width:0.37vw; 
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
      width:0.47vw; 
     height:50vw;
   }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue2{
      background-color: deepskyblue;
      width:0.9vw; 
     height:50vw;
    }
        .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .black{
     background-color: black;
     width:0.38vw; 
     height:50vw;
   }
   .hotpink{
     background-color: hotpink;
     width:0.47vw;
     height:50vw;
   }
   .deepskyblue{
     background-color: deepskyblue;
     width:0.47vw; 
     height:50vw;
   }
    .orange{
     background-color: orange;
     width:0.38vw; 
     height:50vw;
   }
   .deepskyblue2{
      background-color: deepskyblue;
      width:0.9vw; 
     height:50vw;
    }