canvas {
  background-image: url("images/background.png");
  background-repeat: no-repeat;
  background-size: 1200px 800px;
  border: 5px solid #333;
}

body {
  font-family: "Comic Sans MS", "Courier New", monospace;
  background-color: #cff;
}

input {
  font-size: 12px;
  font-family: "Comic Sans MS", "Courier New", monospace;
  background-color: #aff;
  border: 2px solid #333;
}

button {
  width: 100%;
  height: 100px;
  font-size: 30px;
  font-family: "Comic Sans MS", "Courier New", monospace;
  background-color: #0ad;
  border: #333 0.5em solid;
}

button:hover {
  background-color: #0ef;
}

button:pressed {
  background-color: #aff;
}

.controlsBox {
  background-color: #eee;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}

.controlsBox > div {
  background-color: #0ad;
  padding: 1em;
  border: 0.5em solid #333;
}

.controlsBox > div > p {
  width: 65px;
}

.controlsBox > div > input {
  width: 60px;
}

#screenSplit {
  background-color: #aff;
  display: grid;
  grid-template-columns: 65% 35%;
  padding: 1em;
}

#screenSplit > div > p {
  background-color: #0ad;
  padding: 1em;
}