/* Large screens show the static pages larger, as browser zoom would: the
   layout stays the same, everything in it grows (CSS zoom). Each step keeps
   at least about 1500 x 700 px of layout, so nothing switches to a smaller
   breakpoint's layout.

   Viewport units inside zoomed content are zoomed too: 100vh is then taller
   than the screen. A height that must stay within the screen divides by
   --page-zoom (body below, max-h of the dialogs in index.html). */
:root { --page-zoom: 1; }
@media (min-width: 1680px) and (min-height: 790px)  { :root { --page-zoom: 1.125; } }
@media (min-width: 1880px) and (min-height: 875px)  { :root { --page-zoom: 1.25; } }
@media (min-width: 2300px) and (min-height: 1050px) { :root { --page-zoom: 1.5; } }
@media (min-width: 2700px) and (min-height: 1225px) { :root { --page-zoom: 1.75; } }
@media (min-width: 3100px) and (min-height: 1400px) { :root { --page-zoom: 2; } }
html { zoom: var(--page-zoom); }
body { min-height: calc(100vh / var(--page-zoom)); }