/*
Moss fog - https://www.color-hex.com/color-palette/1046890
#3c493f (60,73,63)
#7e8d85 (126,141,133)
#b3bfb8 (179,191,184)
#f0f7f4 (240,247,244)
#a2e3c4 (162,227,196)
*/

:root {
    color-scheme: light dark;

    --highlight:#4bab7d;
    --highlight2:#800080;
    --link:#07c;

    --light-bg:#f9f9f9;
    --main-bg:#f1f1f1;
    --medium-bg:rgba(179, 191, 184, 0.3); /* b3bfb8 */
    --dark-bg:#7e8d85;

    --dark-fg:#222;
    --main-fg:#3c493f;
    --medium-fg:#7e8d85;
    --light-fg:#aaa;
    --contrast-fg:#fff;
    --warning-fg:#e69138;
    --error-fg:#fe4a49;

    --bdr:1px solid #3c493f;
    --medium-bdr:1px solid #bbb;
    --light-bdr:1px solid #ddd;
}

html, body { height:100%; width:100%; }
body { background-color:var(--main-bg); color:var(--main-fg); }
main { height:100%; width:100%; display:flex; justify-content:center; align-items:center; gap:150px; }
div.name-box > div { font-size:56px; color:var(--dark-fg); font-weight:300; padding:5px 0; }
	span.highlight { color:var(--highlight); }
div.login-box { width:300px; font-size:14px; background-color:var(--light-bg); padding:20px; border-radius:20px; border:var(--light-bdr); }
	div.logo { padding-bottom:20px !important; }
    div.logo img { width:20px; height:20px; }
    div.logo span { font-size:24px; font-weight:400; margin-left:5px; text-transform:uppercase; color:var(--dark-fg); }
	div.login-box div { padding:5px 0; }
label { color:#333; }
div.form-mesg { color:var(--error-fg); }
input[type=text], input[type=password], input[type=button] { background-color:#f5f5f5; color:var(--main-fg); font-size:inherit; border:var(--light-bdr); border-radius:10px; padding:10px; width:300px; box-sizing:border-box; outline-width:medium; }
input[type=button] { background-color:var(--link); color:var(--contrast-fg); border:0; width:120px; padding:8px 0; font-size:16px; }
div.btn { text-align:center;  }