body {
  text-align: center;
}


#display {
  font-size: clamp(var(--font-size-md), 15vw, 8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#timer {
  padding:10px;
}


.timer-number {

  display: inline-block;

  width: 2ch;

  cursor: pointer;

}

input.timer-number {

  display: inline-block;

  width: 2ch;

  font-variant-numeric: tabular-nums;

  font-size: clamp(var(--font-size-md), 15vw, 8rem);

  text-align: center;

  line-height: 1;

}


input.timer-number::-webkit-inner-spin-button,
input.timer-number::-webkit-outer-spin-button {

  appearance: none;

  margin: 0;

}



#buttons {
  padding:10px;
}

button {
  padding: max(calc(1em + (1rem - 1em)), 0.2em) max(calc(1em + (1rem - 1em) * 0.2), 0.4em);
  margin:20px;

}