/* Safari 12: ordinary flexbox, viewport units, system fonts; no build step. */
html, body { margin: 0; padding: 0; min-height: 100%; background: #000; color: #fff; }
html { font-size: 1vw; }
body { font-family: Arial, Helvetica, sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
.tablet { width: 100%; min-height: 100vh; padding: 1vh 3rem 2.5vh; display: flex; flex-direction: column; }
.temperature { text-align: center; font-size: 33.15rem; line-height: 1; margin: 1vh 0 1vh; white-space: nowrap; }
.conditions { margin: 0 auto; width: 80rem; font-size: 8.2rem; line-height: 1.25; }
.condition { display: flex; align-items: baseline; margin-bottom: 1.6vh; white-space: nowrap; }
.label { flex: 0 0 26rem; }
.clock-block { margin-top: auto; padding-top: 2vh; text-align: center; }
.clock { font-size: 33.15rem; line-height: 1; white-space: nowrap; }
.day, .date { font-size: 11.7rem; line-height: 1.1; white-space: nowrap; }
.status { position: fixed; top: 0; left: 0; width: 100%; margin: 0; padding: 4px 8px; background: #000; color: #ddd; text-align: center; font-size: 14px; line-height: 1.2; }
.status:empty { display: none; }
@media (orientation: portrait) and (min-aspect-ratio: 3/4) {
  html { font-size: .75vh; }
}
@media (orientation: landscape) {
  .tablet { min-height: 100vh; padding: 2vh 3vw 3vh; }
  .temperature { font-size: 27.3vh; margin: 0 0 1vh; }
  .conditions { font-size: 6vh; line-height: 1.15; margin: 0 auto; width: 75vh; }
  .condition { margin-bottom: 1.5vh; }
  .label { flex-basis: 23vh; }
  .clock-block { padding-top: 1vh; }
  .clock { font-size: 23.4vh; }
  .day, .date { font-size: 9.75vh; }
}