@import url("fonts.css");
@import url("reset.css");
@import url("settings.css");
@import url("common.css");
@import url("custom-elements.css");
@import url("form.css");
@import url("dialog.css");

layout {
    display: flex;
    flex-direction: column;
}

div.logo {
    content: var(--logo);
    display: block;
    margin:1em auto;
    width: 20em;
    height: 10em;
    object-fit: contain;
    flex: 0 0 auto;
}

.boxed-content {
    min-width: calc(min(100vw, 40em));
    width: fit-content;
    max-width: 50em;
    margin:1em auto;
    overflow-y: auto;
    flex-grow: 1;
    border-radius: var(--roundness-large) var(--roundness-large) var(--roundness) var(--roundness);
    background-color: white;
    border:var(--border-thick) solid hsl(var(--main-hue), 50%, 30%);
    padding: var(--spacing-small);
    box-shadow:var(--shadow-offset) var(--shadow-offset) var(--shadow-smoothness) hsla(0, 0%, 0%, 0.5);
}

.boxed-content > header {
    display: block;
    font-size:180%;
    margin-bottom:0.25em;
    text-align:center;
    padding: var(--spacing-small);
    background-color:hsl(var(--main-hue), 50%, 30%);
    border-radius: calc(var(--roundness-large) - var(--border-thick) - var(--spacing-small)) calc(var(--roundness-large) - var(--border-thick) - var(--spacing-small)) 0 0;
    color:white;
} 

.boxed-content main {
    display: block;
    padding: var(--spacing) var(--spacing-divider);
}

div.flags {
    grid-column:1/3;
    margin-top: -0.25em;
    margin-bottom: 0.75em;
    text-align: center;
}

.flagicon {
    height:1.75em;
    margin-left: var(--spacing);
}

footer nav {
    float: right;
    margin-right: calc(var(--spacing) + var(--border-thick))
}

footer {
    font-size:calc(var(--font-size)*0.85);
    margin-top: var(--spacing) var(--spacing-large) var(--spacing-divider) var(--spacing-large);
    position: fixed;
    bottom: 0px;
}

footer nav {
    min-width: none;
    display:block;
    font-size:var(--font-size);
    margin-top: calc(var(--spacing-small)*-1)
}

@media all and (max-width: 1000px) {

    body {
        padding: 0.5em 0;
    }

    footer {
        padding: 1em;
        text-align: center;
    }
    
    .boxed-content {
        width: 100%;
        min-width: 0;
        max-width: unset;
        border: none;
        border-radius: 0;
        margin: 1em 0;
        box-shadow: none;
    }


    form.login {
        display:block;
    }

    form.login label { 
        display: block;
        font-size: calc(var(--font-size) * 0.85);
        font-weight: bold;
        text-align: left;
        margin-bottom: var(--spacing-login);
        padding: 0;
        grid-column-end: span 2;
    }

    form.login input, form.login textarea, form.login select, form.login dyna-select, 
    form.login readonly-input, form.login array-input, form.login set-input, form.login percent-input,
    form.login location-input, form.login code-display, form.login qr-reader {
        display: block;
        /* width: 100%; */
        margin-bottom: var(--spacing-large);
        margin-top: 0;
    }

}