#canvas{
  width: 76vmin;
  margin: 18vmin auto 3vmin auto;
  height: 89vmin; 
  background-color: rgb(255,194,0);
  position: relative;
}

#squareblackone{
  left: 0%;
  top: 0%;
  width: 50%;
  height: 50%;
  background-color: rgb(39,41,43);
  position: absolute;   
}

#squareblacktwo{
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  background-color: rgb(39,41,43);
  position: absolute;
}

#ylineone{
  left: 47%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinetwo{
  left: 41%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinethree{
  left: 35%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinefour{
  left: 29%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinefive{
  left: 23%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinesix{
  left: 17%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylineseven{
  left: 11%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#blineone{
  left: 50%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinetwo{
  left: 56%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinethree{
  left: 62%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinefour{
  left: 68%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinefive{
  left: 74%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinesix{
  left: 80%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blineseven{
  left: 86%;
  top: 16%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}


#blineeight{
  left: 47%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinenine{
  left: 41%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blineten{
  left: 35%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blineeleven{
  left: 29%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinetwelve{
  left: 23%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinethirteen{
  left: 17%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#blinefourteen{
  left: 11%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(39,41,43);
  position: absolute; 
}

#ylineeight{
  left: 50%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinenine{
  left: 56%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylineten{
  left: 62%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylineeleven{
  left: 68%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinetwelve{
  left: 74%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinethirteen{
  left: 80%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}

#ylinefourteen{
  left: 86%;
  top: 50%;
  width: 3%;
  height: 34%;
  background-color: rgb(255,194,0);
  position: absolute; 
}