/* Beside the app, where a wide window has room (below): the logo's own ground, red with the yellow wave rising
   across it, its colours and curve taken from Logo1024.png and stretched to the window. Light whatever the OS, as the
   app is (App.axaml): MainView defines light colours only. */
html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #DA0D1F url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><linearGradient id='red' x2='0' y2='1'><stop offset='0' stop-color='%23F21E30'/><stop offset='.5' stop-color='%23DA0D1F'/><stop offset='.9' stop-color='%23BE0313'/></linearGradient><linearGradient id='yellow' x2='0' y2='1'><stop offset='0' stop-color='%23FDC31A'/><stop offset='1' stop-color='%23FCAE0A'/></linearGradient><rect width='100' height='100' fill='url(%23red)'/><path d='M0,66.6 C4,71.8 18,92.6 42,92.6 C48,92.6 74,70 100,49.2 V100 H0Z' fill='url(%23yellow)'/></svg>") 0 0 / 100% 100% no-repeat;
}

/* The app's page. Avalonia sizes its canvas to this element, so the app sees it as its whole screen. */
#out {
    position: relative;
    height: 100%;
    margin: 0 auto;
    background: white;
    box-shadow: 0 0 40px rgba(60, 0, 0, 0.35);
}

/* The layout is a portrait phone's, proven from 360 wide up to a portrait tablet's, and the phones never turn it.
   A window lying on its side (a desktop, a laptop, a turned tablet) gets a column between the two rather than a
   phone stretched across it; a portrait window keeps its whole width, as a tablet does. The edge shows only where
   there is room beside the column. */
@media (orientation: landscape) {
    #out {
        max-width: 640px;
    }
}

/* Avalonia focuses this element to take the keyboard, and the browser's ring around it framed the whole app after
   every click. Focus inside the app is Avalonia's to show, on the control that has it. */
#out:focus {
    outline: none;
}

/* The page under the app until the runtime has loaded and Avalonia closes it. */
.avalonia-splash {
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
    font-family: sans-serif;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* The logo, at the 192 px icon's half (index.html), so a 2x screen draws it pixel for pixel. */
.avalonia-splash img {
    display: block;
}

/* Only while another tab has the app (main.js). */
.avalonia-splash p {
    color: #1b2a4e;
    margin: 24px 16px 0;
    text-align: center;
}

.avalonia-splash.splash-close {
    transition: opacity 200ms, display 200ms;
    display: none;
    opacity: 0;
}