html {
  margin: 0;
}

span {
  display: block;
}

.canvas {
  margin: 100px auto;
  width: 80%;
  text-align: center;
}

.button {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#red {
  background: #ff0000;
}

#orange {
  background: #ffa500;
}

#blue {
  background: #0000ff;
}

#green {
  background: #008000;
}