h1 {
  font-family: 'Abel', sans-serif;
  font-size: 92px;
  text-align: center;
  color: #333;
}

section.columns {
  width: 600px;
  height: 20px;
  margin-left: 20px;
}

section.canvas {
  width: 600px;
  height: 600px;
  float: left;
  cursor: crosshair;
}

section.rows {
  height: 600px;
  width: 20px;
  float: left;
}

.axis {
  width: 20px;
  height: 20px;
  float: left;
  text-align: center;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
}

.axis:hover {
  color: white;
  background: #333;
}

.column-box {
}

.row-box {
}

.wrapper {
  width: 640px;
  margin: 0px auto;
  position: relative;
}

.palette {
  position: absolute;
  left: 640px;
  top: 20px;
  width: 200px;
}

.paint {
  width: 110px;
  margin: 0px auto;
  height: 50px;
  cursor: pointer;
}

.palette h3 {
  text-align: center;
  font-family: 'Abel', sans-serif;
  font-size: 30px;
}

.box {
  width: 20px;
  height: 20px;
  float: left;
  background: white;

}

.yellow {
  background: rgb(252,198,1);
    transition: all 0.7s;
}

.red {
    background: rgb(213,0,0);
      transition: all 0.7s;
}

.blue {
    background: rgb(3, 94, 174);
      transition: all 0.7s;
}

.gray {
  background: rgb(235, 239, 240);
    transition: all 0.7s;
}

.highlight {
  background: #ddd;
}

.white {
  background: white;
}

.selected {
  background: #eef;
  transition: none;
}

#clear {
  cursor: pointer;
}

#clear:active {
  color: lightgreen;
}