body {
  margin:0; padding:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; height:100vh; background-color:#fff; color:#000;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; transition:background-color 0.5s,color 0.5s;
  position:relative;
}
body.dark-mode { background-color:#000; color:#fff; }
body.secondary-active #tzLabel, body.secondary-active #time, body.secondary-active #date,
body.secondary-active #tzLabel2, body.secondary-active #time2, body.secondary-active #date2 {
  /* shrink both displays when secondary active */
  /* tzLabel and date from 3.9vw to ~2.73vw; time from 10.4vw to ~7.28vw */
  font-size: inherit;
}
#tzLabel { font-size:3.9vw; margin-bottom:0.5rem; font-weight:600; }
#time { font-size:10.4vw; font-weight:bold; }
#date { font-size:3.9vw; margin-top:20px; }
#tzLabel2 { font-size:2.73vw; margin-bottom:0.5rem; font-weight:600; }
#time2 { font-size:7.28vw; font-weight:bold; }
#date2 { font-size:2.73vw; margin-top:20px; }
.secondary { display:none; margin-top:3rem; }
.controls { position:absolute; top:10px; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
#timezone-select,#timezone2-select { font-size:1rem; padding:0.5rem; }
#mode-toggle,#hour-toggle { transform:scale(1.2); }
body.secondary-active #tzLabel, body.secondary-active #date {
  font-size:2.73vw !important;
}
body.secondary-active #time {
  font-size:7.28vw !important;
}
body.secondary-active #tzLabel2, body.secondary-active #date2 {
  font-size:2.73vw !important;
}
body.secondary-active #time2 {
  font-size:7.28vw !important;
}