
:root {
	--text  : #111;		/* body-text, input-text */
	--base  : #fff;		/* input-back, button-text */
	--link  : #999;		/* placeholder-text */
	--button: #88f;		/* button-back */
	--bottom: #77f;		/* button-hover */
	--radius: 6px;
}

* {
	margin : 0;
	padding: 0;
	border : none;
	list-style:none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

body {
	font	  : 15px/1.25 'Alef';
	color	  : var(--text);
	background: #ddd;
}

.form {
	position  : relative;
	top		  : calc(50vh - 230px);
	margin	  : 70px auto;
	background: #eee;
	width	  : 400px;
	text-align: center;
	padding	  : 40px;
	-webkit-border-radius: var(--radius);
	   -moz-border-radius: var(--radius);
	   -ms-border-radius:  var(--radius);
		-o-border-radius:  var(--radius);
		   border-radius:  var(--radius);
}

.form > h1 {
	color		 : #000; //var(--base);
	text-shadow	 : 1px 1px 0px rgba(100, 100, 100, 0.7);
	font-weight	 : 400;
	font-size	 : 1.8em;
	margin-bottom: 20px;
}

input {
	background	 : var(--base);
	color		 : var(--text);
	display		 : block;
	width		 : 322px;
	padding		 : 15px;
	margin-bottom: 10px;
	-webkit-border-radius: var(--radius);
	   -moz-border-radius: var(--radius);
	   -ms-border-radius:  var(--radius);
		-o-border-radius:  var(--radius);
		   border-radius:  var(--radius);
	outline: none;
	border : 1px solid #ddd;
}

input:focus {
	border: 1px solid #bbb;
}

::-webkit-input-placeholder {
	color: var(--link);
}

:-moz-placeholder {
	color: var(--link);
}

::-moz-placeholder {
	color: var(--link);
}

:-ms-input-placeholder {
	color: var(--link);
}

button {
	position	 : relative;
	display		 : block;
	margin-top	 : 15px;
	margin-bottom: 15px;
	padding		 : 17px;
	width		 : 322px;
	-webkit-border-radius: var(--radius);
	   -moz-border-radius: var(--radius);
	   -ms-border-radius:  var(--radius);
		-o-border-radius:  var(--radius);
		   border-radius:  var(--radius);
	font-size : 1.2em;
	background: var(--button);
	color	  : var(--base);
//	box-shadow: 2px 3px 0px var(--bottom);
	cursor	  : pointer;
}

button:hover {
	background: var(--bottom);
}

button:active {
	top:  1px;
	left: 1px;
//	box-shadow:none;
}