body {
  transition: 0.5s;
}

#code {
  border-radius: 4px;
  padding: 80px;
  margin: 0 auto;
  width: 400px;
  height: 220;
  background: white;
  color: rgb(51, 51, 51);
}

#code, #color {
  padding: 80px;
  font-size: 32px;
  margin-top: 150px;
}

#code, #canvas {
  display: none;
}

.active {
  background: white;
  border: 1px solid #d3d3d3;
  margin-top: 40px;
}

.correct {
  transition: 0.1s;
  color: #4BB74C;
}

.arrows, .title, .colors, .colors-title {
  display: inline-block;
}

span[class^="color-"] {
  margin-left: -9px;
}

span[class^="color-"]:first-of-type {
  margin-left: 0;
}

div .arrow-0, div .colors {
  margin-left: 10px;
}