/* Site style overrides. Each release/* branch owns its own copy of this file (and site/config.js);
   shared code on main never edits it.

   Loaded last on every page, so rules here win over css/common.css, css/landing.css and
   css/player.css. Override design tokens (the custom properties in css/common.css :root) or
   individual rules. */

/* Fit the whole photo viewer on screen: static and snapshot images shrink to the space left
   under the header, title, tabs and controls, centred, instead of filling the width. */
:root {
    --viewer-max-height: max(240px, calc(100vh - 340px));
}

@supports (height: 100dvh) {
    :root {
        --viewer-max-height: max(240px, calc(100dvh - 340px));
    }
}

.timelapse-image-wrapper {
    justify-content: center;
}

.timelapse-image {
    width: auto;
    max-width: 100%;
    max-height: var(--viewer-max-height);
    object-fit: fill;
}

.timelapse-image-frame {
    width: auto;
    max-width: 100%;
}

.static-image-wrapper {
    width: fit-content;
    max-width: 100%;
    min-width: min(100%, 640px);
    margin: 0 auto;
}

#static-image {
    width: auto;
    max-width: 100%;
    max-height: var(--viewer-max-height);
    object-fit: fill;
}