html {
    --color1_base: #054687;
    --color1_light: #085db3;
    --color1_dark: #054280;

    --color2_base: #e7f3fe;
    --color2_light: #ffffff;
    --color2_dark: #b6d9fc;

    --red_light: #fdd4c8;
    --green_light: #c8ffc3;

    --buttonBase: var(--color1_base);
    --buttonHover: var(--color1_light);
    --buttonActive: var(--color1_dark);

    --inputBase: var(--color2_base);
    --inputIncorrect: var(--red_light);
    --inputCorrect: var(--green_light);

    --backgroundBase: var(--color1_base);
    --backgroundSidebar: var(--color2_light);

    --textLight: var(--color2_light);
    --textLightHover: var(--color2_dark);
    --textDark: var(--color1_dark);
    --textDarkHover: var(--color2_dark);

}


html * {
    /*border: dotted 1px lightgray;*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

body, main, header, footer, article, aside {
    display: flex;
    flex-direction: column;
    color: var(--textDark);
}

body, main, header, footer {
    width: 750px;
    padding: 8px;
}

main {
    flex-direction: row;
}

article {
    flex-grow: 1;
}

header, footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--backgroundBase);
    color: var(--textLight);
}

header>div {
    flex-grow: 1;
}

header img {
    height: 30px;
}

footer * {
    font-size: 11px;
}