html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  /* touch-action: none; disables touch events on mobile devices */
}

.mobile-button button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* opacity: 1;
  transition: opacity 0.3 ease; */
}

button {
  width: 108px;
  height: 108px;
  font-size: 24px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* padding: 16px 8px; */
}

button:active {
  background-color: aliceblue;
}

.on {
  font-style: bold;
  color: green;
}

.off {
  font-style: bold;
  color: red;
}

@keyframes animateOpacity {
  from { filter: opacity(1); }
  to { filter: opacity(0.3); }
}

@keyframes animateOpacity2 {
  from { filter: opacity(0.3); }
  to { filter: opacity(1); }
}

.semi-transparent {
  /* opacity: 0.3; */
  animation-name: animateOpacity;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.semi-opaque {
  /* opacity: 1; */
  animation-name: animateOpacity2;
  animation-duration: 1s;
  animation-fill-mode: both;
  /* transition: opacity 0.3 ease; */
}

.hide-content {
  display: none;
}