canvas {
  max-width: inherit; 
  border: solid black 1px;
  touch-action: none;
}

.canvasContainer {
  width: 100%;
}

.b {
  width:40px;
  height:40px;
  border: solid black 1px;
}

.c {
  margin-left: 9px;
  margin-top: 9px;
  width:20px;
  height:20px;
  border: solid black 1px;
}

.white {
  margin-left: 7px;
  width:40px;
  height:40px;
  background-color: white;
  border: solid black 1px;
}

.yellow {
  width:40px;
  height:40px;
  background-color: yellow;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

.red {
  width:40px;
  height:40px;
  background-color: red;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

.green {
  width:40px;
  height:40px;
  background-color: green;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

.blue {
  width:40px;
  height:40px;
  background-color: blue;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

.black {
  width:40px;
  height:40px;
  background-color: black;
  border-top: solid black 1px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
}

.boxes {
  display: flex;
  flex-direction: row;
}