html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.canvas {
  height: 100%;
  width: 100%;  
  position: relative;
}

.container {
  position: relative;
  height: 100%; 
}

.toggle-button {
  position: absolute;
  width: 100px;
  right: 30px; 
  bottom: 10px;
  z-index: 3;
}

button {
  border: 0;
  background: rgba(123, 168, 219, 0.541);
  color:  rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}

.counters {
  display: flex;
  position: absolute;
  width: 100%; 
  color: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
  height: 100%;
  justify-content: stretch;
  align-items: stretch;
  /* Pointer events none needed to capture mouse */
  pointer-events:none; 
  z-index: 2;
}

.counter {
  flex-basis: 50%;
  text-align: center;
  font-size: 2rem;
  margin: auto; 
  height: 100%; 
  padding-top: 50px;
}
.counter.winner { background: rgb(109, 36, 143); color: rgb(132, 252, 34); }
.counter.winner:before { content: "Winner! "; display:block; clear:both;width:100%; }
.counter:first-child { border-right: 1px dashed rgba(255, 255, 255, 0.4); }