body {
    margin: 0;
    padding: 0;
    background-color: darkslategrey;
    /*box-sizing: content-box;*/
}

.frame:hover {
    background-color: antiquewhite;
    
}
.frame {
    position: absolute;
    background-color: green;
    width: 97vw;
    height: 97vw;
    top: 50%;
	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	background-color: #ebebeb;  
    padding: 1.4% 1% 1.1% 1.4%;
}

#canvas:hover {
    background-color: aqua;
}
#canvas {
    border: 1px solid #c9bfb6;
    box-shadow: -5px 1px 2px 2px #c9bfb6;
    height: 99%;/*98%;*/
    width: 97%;/*96%;*/
    margin: 0 auto;
}


#canvas figure:hover {
    background-color: yellow;
}

figure {
    background-color: purple;
    width: 2.3799%;
    height: 100%;
    float: left;
    margin: 0;
  
}

#s_1 {
    background-color: #5a5d6e; /*grey*/
    
}

#s_2 {
    background-color: #28272c;
    
}
#s_3 {
    background-color: #5a5d6e;
    
}
#s_4 {
    background-color: #28272c;
    
    
}
#s_5 {
    background-color: #5a5d6e;
    
}
#s_6 {
    background-color: #28272c;
    
}
      
     
#s_7 {
    background-color: #80905f; /*green*/
    
}
#s_8 {
    background-color: #28272c; /*black*/
}
#s_9 {
     background-color: #4479ed; /*blue*/
    
}
#s_10 {
    background-color: #28272c;
    
}
#s_11 {
    background-color: #80905f; /*green*/
    
}
#s_12 {
    background-color: #28272c; /*black*/
    
}
      
#s_13 {
    background-color: #5a5d6e; /*grey*/
    
}

#s_14 {background-color: #4479ed; /*blue*/}

#s_15 {
    background-color: #6f2d2e; /*brown*/
    
}

#s_16 {
background-color: #5a5d6e; /*grey*/
}

#s_17 {
    background-color: #28272c; /*black*/
}

#s_18 {
    background-color: #80905f; /*green*/
}

#s_19 {
    background-color: #6f2d2e; /*brown*/
}

#s_20 {
    background-color: #f1bbb9; /*pink*/
}

#s_20a {
    
    background-color: #00784b; /*darkgreen*/  /*skipped a letter*/
    
}

#s_20c {
    background-color: #f1bbb9; /*pink*/
    
}

#s_20d {
    background-color: #28272c; /*black*/
    
}

#s_20e {
    background-color: #5a5d6e; /*grey*/
    
}

#s_20f {
    background-color: #28272c; /*black*/
    
}

#s_20g {
    background-color: #5a5d6e; /*grey*/
    
}

#s_20h {
    background-color: #28272c; /*black*/
    
}
#s_20i {
    background-color: #80905f; /*green*/
    
}
#s_20j {
    background-color: #28272c; /*black*/
    
}
#s_20k {
    background-color: #f1bbb9; /*pink*/
    
}
#s_20l {
    background-color: #e10b27; /*red*/
}

#s_21 {
    background-color: #fcb600; /*gold*/
}

#s_22 {
    background-color: #e10b27; /*red*/
}

#s_23 {
    background-color: #fcb600; /*gold*/
}

#s_24 {
    background-color: #28272c; /*black*/
}

#s_25 {
    background-color: #4479ed; /*blue*/
}

#s_26 {
    background-color: #28272c; /*black*/
}

#s_27 {
    background-color: #5a5d6e; /*grey*/
}

#s_28 {background-color: #28272c; /*black*/}

#s_29 {
    background-color: #5a5d6e; /*grey*/
}

#s_30 {background-color: #28272c; /*black*/}


#s_31 {
    background-color: #5a5d6e; /*grey*/
}



@media screen and (min-width: 650px){
    
    
    .wrapper {
        margin: 0 auto; 
        width: 650px;
    }
    
    .frame {
        width: 75.30vh;
        height:75.30vh;
        margin: 0 auto;
    }


}