#totp-body {
  font-size: 10vmin;
  font-weight: bold;
  font-family: Tahoma;
  --pct: 0%;
}
#totp-body .table {
  display: table;
  height: 100%;
  width: 100%;
}
#totp-body .cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#totp-body .left,
#totp-body .right {
  letter-spacing: 0.5em;
}
#totp-body .left {
  transform: translateX(calc(-1 * (100% - var(--pct))));
  background-color: red;
  color: #FFF;
  text-shadow: 0 0 0.05em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000;
  overflow: hidden;
  margin: 0 0 -1.5em;
  line-height: 1.5em;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0) 50%);
  transition: 0.25s linear transform;
}
#totp-body .left > div {
  transform: translateX(calc((100% - var(--pct))));
  transition: 0.25s linear transform;
}
#totp-body .right {
  background-color: green;
  color: #FFF;
  text-shadow: 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000;
  line-height: 1.5em;
  box-shadow: 0 0 0.1em 0.05em #000;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0) 50%);
}

#btnCopyToClipboard {
  display: inline-block;
  font-size: 4vmin;
  padding: 0.5em 1em;
  box-shadow: 0 0 0.3em #000;
  border-radius: 2em;
  cursor: pointer;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4));
  background-color: hsl(210,100%,50%);
  color: #FFF;
  text-shadow: 0 0 0.1em #000;
  user-select: none;
}
#btnCopyToClipboard:hover {
  filter: grayscale(50%);
}