/* Same colors and style as the RF Dashboard's countdown box, scaled to the whole page. */
:root {
  --bg: #000;
  --text: #f2f5f8;
  --text-2: #a4adb8;
  --accent: #36d27f;
  --alert: #ff4d4f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }

.box {
  position: absolute; inset: 2vmin;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5vmin;
  padding: 3vmin 4vmin; text-align: center;
  border: max(2px, .35vmin) solid #1f4a33; border-radius: 3vmin; background: #0c1a13;
}
.box.urgent { border-color: #6b2222; background: #1d0c0c; }
.box.urgent .time { color: var(--alert); }

/* Sizes are set by clock.js to fill the space; these are starting points. */
.title { font-size: 9vmin; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title + .label { margin-top: .5vmin; }
.label { font-size: 4vmin; font-weight: 800; letter-spacing: .12em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; }
.time { font-size: 30vmin; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1; white-space: nowrap; }