*,
*::before,
*::after
{ 
  box-sizing: border-box;
}


*
{
    image-rendering: optimizeQuality;
}

html,
body
{
    margin: 0;
    padding: 0;
}

html
{
    font-family: sans-serif;
}


/* COMPONENT: app */

.app
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app__header
{
}

.app__content
{
    flex: 1 1 auto;
    background-color: #aaa;
}


/* COMPONENT: controls */

.controls
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.controls #width,
.controls #height
{
    width: calc(5ch + 1em);
    text-align: end;
}


/* COMPONENT: zoomArea */

.zoomArea
{
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.zoomArea__item
{
    --scale: 1.0;
    --top: 0;
    --left: 0;
    position: relative;
    top: calc(var(--top) * 1px);
    left: calc(var(--left) * 1px);
    flex: 0 0 auto;
    transform: scale(var(--scale));
    font-size: calc(1.5em / var(--scale));
}


/* COMPONENT: page */

.page
{
    --width: 640;
    --height: 480;
    --widthPx: calc(var(--width) * 1px);
    --heightPx: calc(var(--height) * 1px);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--widthPx);
    height: var(--heightPx);
    min-width: var(--widthPx);
    min-height: var(--heightPx);
    outline: #c7c7c7 solid thin;
    box-shadow: aliceblue 0.1em 0.1em 1.5rem 0.5rem;
    overflow: hidden;
    background-color: white;
}

.page--dragOver
{
    background: #f3e5c7;
}

.page__emptyMessage
{
    color: black;
    font-weight: bold;
    text-align: center;
    padding: 0.125ex 0.5ch;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    background-color: white;
}

@supports (text-shadow: red 0 0 0)
{
    .page__emptyMessage
    {
        background-color: transparent;
        text-shadow: white 0 0 0.75ex;
    }
}


/* COMPONENT: progressModal */

.progressModal
{
    position: fixed;
    background-color: white;
    padding: 0 1em;
    border: black solid 1ex;

    top: 50%;
    left: 50%;
    /* center */
    transform: translate(-50%, -50%);
    /* container has overflow:hidden. Make sure we fit into the
     * viewport, even if browser does not support transforms
     */
    max-width: 50%;
    max-height: 50%;

    /* container has overflow:hidden, so we may use outline to
     * create backdrop
     */
    outline: #00000042 solid calc(50vw + 50vh);
}

.progressModal__heading
{
    text-align: center;
}