html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

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

canvas, video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}

video.mirrored {
  transform: rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
}

.tools {
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 20px;
  text-align: center;
}

.ui {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.hand {
  position: absolute;
  width: 95%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}