body {
        margin: 0px;
        font: 1.2em "Gill Sans", Arial, Helvetica, sans-serif;
        top: 0px;
        border: 5px solid #033665;

}

a {
        color: #033665;
}

a:visited {
        color: #1a7ad3;
}

a:hover {
        color: #1ea034;
}

p,
form {
        padding: 3px 3px 3px 18px;
        /*      text-indent: 15px;  */
}

input,
select,
button,
input::file-selector-button {
        font: inherit;
        color: inherit;
        line-height: 120%;

}

:root {
        --width-input-border: 2px;
        --radius-inputs: 0.25em;
        --padding-inputs: 0.25em;
        --co-body-accent: #07c;
        --margin-label: 0.3em;
}

select,
textarea,
input[type="text"],
input[type="submit"] {
        padding: var(--padding-inputs);
        border: var(--width-input-border) solid;
        border-radius: var(--radius-inputs);
}

label {
        cursor: pointer;
        display: block;
        font-weight: bold;

        &+&,
        &+input,
        &+select,
        &+button,
        &+textarea {
                margin-top: var(--margin-label);
        }
}

.error {
        color: red;
}

div#app {
        height: 100vh;

        /* grid container settings */
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        /* grid-template-columns: 1fr minmax(300px, 600px) 1fr; */

        grid-template-areas:
                'header'
                'main'
                'footer';

        >header {
                grid-area: header;
                height: auto;
                /* position: relative; */
                top: 0px;
                margin-top: 0px;
                padding-top: 0.5em;
                background: #1a7ad3;
        }

        >footer {
                grid-area: footer;
                height: auto;
                font-size: smaller;
                border-top: 4px solid #c5e3ff;
                background-color: #1a7ad3;
                position: relative;
                margin-top: 5px;
                padding-top: 5px;
                padding-bottom: 15px;
                text-align: center;


                a.footerLink {
                        color: #fff;
                        text-decoration: none;
                }
        }
}


#app>header>h1,
#app>header>h1 a:visited,
#app>header>h1 a {
        font-size: 18pt;
        margin-left: 10px;
        color: white;
        margin-top: 0px;
        text-decoration: none;
}


#app>main {
        grid-area: main;

        justify-content: center;
        align-items: center;

        max-width: 700px;

        grid-template-rows: 1fr;
        /* grid-template-columns: 1fr minmax(0, 80vi) 1fr; */
        /* grid-template-columns: 1fr minmax(0, 600px) 1fr; */
        grid-template-columns: 1fr auto 1fr;

        /* grid-gap: 5px; */
        /* box-sizing: border-box; */

        overflow: auto;

        margin-left: 2vw;

        /* padding-left: 10hv; */
        padding-right: 10vh;
        margin-right: 10vw;
        padding-top: 0em;
        padding-bottom: 2em;

}

/* https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/ */
#app>section {
        grid-area: 1 / 1 / 1 / 3;
}

#app>section.full {
        grid-area: 1 / 1 / 1 / 4
}

#app>main>h2 {
        font-size: 15pt;
}

dt {
        margin-top: 10px;
        font-weight: bold;
}