:root {
    color-scheme: light dark;

    --highlight:#4bab7d;
    --green-fg:rgba(0,172,127, 1);
    --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:rgb(255,255,255);
	/*background:linear-gradient(180deg, rgba(0, 172, 127, 0.3) 0%, rgba(0, 172, 127, 1) 100%);*/
	background:radial-gradient(circle,rgba(0, 172, 127, 0.3) 0%, rgba(0, 172, 127, 0.8) 100%);
	color:var(--main-fg);
}
main {
	display:flex; justify-content:center;
	box-sizing:border-box; width:62rem; height:38rem;
	position:absolute; top:50%; left:50%; margin-left:-31rem; margin-top:-19rem;
	/*box-sizing:border-box; width:31rem; height:38rem;
	position:absolute; top:50%; left:50%; margin-left:-16.5rem; margin-top:-19rem;*/
}
div.name-box, div.login-box {
	width:31rem; height:38rem; box-sizing:border-box;
	padding:5rem;
}
div.name-box {
	background-color:rgba(255,255,255, 0.3);
	border-radius:2rem 0 0 2rem;

	div { font-size:2rem; color:var(--dark-fg); font-weight:300; line-height:1.2; }
	div.two { transform:rotate(90deg); transform-origin:0.5rem 0; font-size:2rem; }
	div.three, div.four, div.five { margin-left:3rem; }
	span.highlight { color:rgba(255,255,255, 0.8); }
}
div.login-box {
	background-color:rgba(255,255,255, 0.6);
	border-radius:0 2rem 2rem 0;

}
label div {
	color:#555;
	font-size:0.9rem; font-weight:600;
	margin:1.5rem 0 0.3rem 0.5rem;
}
div.logo {
	text-align:center;
	padding-bottom:0.5rem;

    img { width:1.3rem; height:1.3rem; }
    span { font-size:1.8rem; font-weight:400; margin-left:0.3rem; text-transform:uppercase; color:var(--dark-fg); }
	div.form-mesg { color:var(--error-fg); }
}
div.btn { text-align:center; }
input[type=text], input[type=password], input[type=button] {
	background-color:rgba(255,255,255, 0.7); color:var(--main-fg);
	border:0; border-radius:0.5rem; box-shadow:0px 1px 2px rgba(0,0,0, 0.1);
	box-sizing:border-box; padding:0.6rem 0.5rem; width:100%;
	font-size:1rem; letter-spacing:1px;
}
input[type=button] {
	background-color:var(--link); color:var(--contrast-fg);
	margin-top:2.5rem;
	cursor:pointer;
	letter-spacing:normal;
	width:50%;
}
div.forgot {
	cursor:pointer;
	text-align:right;
	font-size:0.9rem;
	padding:0.5rem;
	color:var(--link);
}

div.trapezoid {
    display:inline-block;
    border-bottom: 0.625rem solid skyblue;
    border-left: 0.3rem solid transparent;
    border-right: 0.3rem solid transparent;
    height: 0px;
    width:1rem;
    margin:1px;
}