:root {
	--color-black:    #000000;
	--color-dark:     #424242;
	--color-medium:   #757575;
	--color-light:    #BDBDBD;
	--color-white:    #FFFFFF;
	--color-highlight:#AAAACC;
	--color-warn:     #AACCAA;

	--font-large:  1.0rem;
	--font-medium: 0.8rem;
	--font-small: 0.6rem;
}

* {
	margin: 0;
	padding: 1px;
	font-family: Verdana, sans-serif;
/*	font-size: 16px; */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
/*	border: 0.5px solid var(--color-medium); */
}

body {
	background-color: var(--color-light);
}

input, button {
	display: block;
	margin: 8px 0;
	padding: 4px;
	font-size: var(--font-medium); 
	color:         var(--color-dark);
	background:    var(--color-light);
	border:        1px solid var(--color-medium);
	border-radius: 2px;
	box-shadow: 0 0 1px var(--color-highlight);
	outline: none;
}

input {
	width: 150px;
	height: 1rem;
}

button {
	height: 0.94rem;
	align-items: center;
	justify-content: center;
	display: flex;
}

input:focus, button:hover {
	color: var(--color-black);
	border-color: var(--color-highlight);
	box-shadow: 0 0 2px var(--color-highlight);
	outline: 1px solid var(--color-highlight);
}

input[type="password"] {
	letter-spacing: 0.155em;
	font-size: var(--font-small);
}

li {
	max-height: 50px;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

li .icon {
	height: 1em;
	width: auto;
}

.icon {
	width: 20px;
	height: 20px;
}