styles.css

body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin: 0;
  height: 100%;
}

.home {
  margin: 1rem auto;
}

.hidden {
  display: none;
}

@media screen and (min-width: 1000px) {
  /* hack! to detect non-touch devices */
  div#links a {
    line-height: 0.8em;
  }
  canvas,
  video {
    min-height: 215px;
    margin-bottom: 3rem;
  }
}

canvas {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

video {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  text-align: center;
  margin: 1rem;
}

button:disabled {
  background: lightgray;
  color: black;
}
select option:disabled {
  color: lightgray;
  font-weight: bold;
}
form {
  margin: 1em;
}

.control {
  text-align: center;
  margin: 0 0.5rem;
  border-radius: 1rem !important;
  font-size: 1rem;
  width: 110px;
}

.hidden-link {
  visibility: hidden;
}

footer {
  font-size: 1rem;
}

.camera .row {
  height: 215px;
}

#flip button {
  width: 50%;
}