html,
body {
  margin: 0;
  background-color: #273136;
}

table {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  touch-action: manipulation;
  margin-top: 50px;
}

input[type=button] {
  width: 100%;
  padding: 20px 40px;
  background-color: rgb(224, 146, 0);
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

input[type=button]:hover {
  background-color: rgb(216, 140, 0);
}

input[type=button]:active {
  background-color: rgb(199, 129, 0);
}

input[type=button].reset {
  background-color: rgb(220, 1, 1);
}

input[type=button]:hover.reset {
  background-color: rgb(205, 1, 1);
}

input[type=button]:active.reset {
  background-color: rgb(190, 1, 1);
}

input[type=text] {
  padding: 20px 30px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  border: 2px solid black;
  pointer-events: none;
}

input[type=text].error {
  color: red;
}