:root {
	--c1: #819f00;
	--c1-bkg: #f2f8e8;
	--c2: #6d6dbf;
	--c2-bkg: #f2f2ff;

	--transparent: transparent;
	--white: #fff;
	--black: #000;
	--black-semi-transparent: rgba(0, 0, 0, 0.5);
	--orange: #fa2;
	--orange-light: #ffc363;
	--red: #f00;

	--grey-lighter: #fafafa;
	--grey-light: #eee;
	--grey-medium: #ccc;
	--grey-dark: #777;
	--grey-darker: #555;

	/* instruction */
	--instruct-txt: var(--black);
	--instruct-txt-bld: var(--c1);
	--instruct-bkg: #ffe;
	--instruct-brd-left: #ee3;

	--login-lbl-bkg: var(--c2);
	--login-lbl-brd: 1px solid var(--c2);
	--login-input-brd: 1px solid var(--grey-light);
	--login-submit-txt: var(--white);
	--login-submit-bkg: var(--c1);
	--login-submit-shd: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
	--login-msg-txt: var(--grey-darker);
	--login-msg-bkg: var(--grey-light);
	--login-instruct-txt: var(--black);
	--login-instruct-bkg: var(--instruct-bkg);
}

#main {
	color: var(--body-txt);
}

header {
	justify-content: flex-end;
}

#login {
	margin: 1em 0em 1em 0em;
}

#login div.label {
	display: inline-block;
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: 0.4em 0.4em;
	background-color: var(--login-lbl-bkg);
	border: var(--login-lbl-brd);
	padding: 0;
	width: 2em;
	height: 2em;
	vertical-align: top;
}

#login div.user, #login div.pwd {
	margin-bottom: 1em;
}

#login div.user div.label {
	background-image: url(user.png);
}

#login div.pwd div.label {
	background-image: url(key.png);
}

#login div.value {
	display: inline-block;
	height: 2em;
	margin-right: 0.3em;
}

#login input {
	margin: 0;
	height: 2em;
	padding: 0em 0.3em;
	border: var(--login-input-brd);
}

#login input[type='submit'] {
	border: none;
	background: var(--login-submit-bkg);
	color: var(--login-submit-txt);
	padding: 0.3em 0.5em;
	cursor: pointer;
}

#login input[type='submit']:hover {
	box-shadow: var(--login-submit-shd);
}

#message.loginmsg {
	display: none;
	max-width: 24em;
	background-color: var(--login-msg-bkg);
	margin: 1em 0;
	padding: 0.5em;
	text-align: center;
	color: var(--login-msg-txt);
}

#instruction {
	max-width: 24em;
	margin: 1em 0;
	padding: 0.5em;
	color: var(--login-instruct-txt);
	background-color: var(--login-instruct-bkg);
}

@media screen and (min-width: 768px) {

#login {
	padding-top: 3em;
}

}

.darkmode {
	--login-lbl-bkg: var(--grey-blue-light);
	--login-lbl-brd: 1px solid var(--grey-blue-light);
	--login-input-brd: 1px solid var(--grey-blue-light);
	--login-submit-txt: var(--black);
	--login-submit-bkg: var(--c1);
	--login-submit-shd: 1px 2px 3px 1px var(--black-semi-transparent);
	--login-msg-txt: var(--grey-light);
	--login-msg-bkg: var(--grey-blue-darker);
	--login-instruct-txt: var(--grey-lighter);
	--login-instruct-bkg: var(--grey-blue-medium);
}