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

body {
  background: #f5f5f3;
  color: #1f2933;
}

main {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  box-sizing: border-box;
}

#clock {
  display: block;
  width: clamp(16rem, 70vmin, 30rem);
  height: clamp(16rem, 70vmin, 30rem);
}

.clock-face {
  fill: #fbfaf8;
  stroke: #334155;
  stroke-width: 2.5;
}

.clock-tick {
  stroke: #475569;
  stroke-linecap: round;
  stroke-width: 2;
}

.numeral {
  dominant-baseline: central;
  fill: #334155;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  paint-order: stroke fill;
  pointer-events: none;
  stroke: #fbfaf8;
  stroke-width: 0.35;
  text-anchor: middle;
  user-select: none;
}

.numeral.roman {
  font-size: 5.4px;
  font-weight: 700;
}

.numeral.arabic {
  fill: #475569;
  font-size: 4.2px;
  font-weight: 600;
}

.clock-hand {
  stroke: #1f2937;
  stroke-linecap: round;
  transform-origin: 0 0;
}

.clock-hand-hour {
  stroke-width: 4;
}

.clock-hand-minute {
  stroke-width: 3;
}

.clock-hand-second {
  stroke: #b42318;
  stroke-width: 1.5;
}