body {
  margin: 0;
}

.london-clock {
  --row: 1.4em;               /* height of one digit row (keep in sync with ROW in the JS) */
  --fade: 0.28em;             /* soft edge height at top and bottom of the window */
  --roll: 500ms;              /* roll duration */
  display: flex;
  align-items: baseline;
  width: 100%;
  max-width: 536px;
  margin: 32px auto 0;
  padding-top: 9px;
  border-top: 1px solid #d6d6d6;
  box-sizing: border-box;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 10px;
  line-height: var(--row);
  color: #464647;
  font-variant-numeric: tabular-nums;
}
.london-clock .digit {
  display: inline-block;
  width: 1ch;
  height: var(--row);
  overflow: hidden;
  text-align: center;
  /* Soft fade at the top and bottom edges of the window */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.london-clock .reel {
  display: block;
  transition: transform var(--roll) cubic-bezier(.45, 0, .2, 1);
  will-change: transform;
}
.london-clock .reel i {
  display: block;
  height: var(--row);
  font-style: normal;
}
.london-clock .label { white-space: pre; }
.london-clock .sep { display: inline-block; width: 1ch; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .london-clock .reel { transition: none; }
}