:root {
  color-scheme: light dark;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

svg {
  width: 30em;
  max-width: 80vmin;
}

#major-index, #minor-index {
  stroke: currentColor;
}

#hour-hand, #minute-hand {
  fill: currentColor;
}

#second-hand, #hub {
  fill: #de394b;
}

#difference {
  font-family: sans-serif;
  font-style: normal;
  font-size: 0.25em;
  font-weight: 700;
  fill: currentColor;
}