body{
	background-color:#afc8d7;
	font-family: 'Open Sans', sans-serif;
	font-size:16pt;
}

form{
	margin:auto;
	padding:10px;
	background-color:rgba(232,232,232,0.75);
	border-radius:5%;
	display:block;
	width:400px;
	-webkit-box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
	box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
}

input:focus{
	
	-webkit-box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
	box-shadow: 0px 0px 35px -7px rgba(0,0,0,1);
}

form h1{
	text-align:center;
	border-bottom:1px black solid;
}

.error{
	color:#f00;
}

/* https://codepen.io/onion2k/pen/xfepi */
/* shake on error by Chris Neale */
.ahashakeheartache {
	-webkit-animation: kf_shake 0.4s 1 linear;
	-moz-animation: kf_shake 0.4s 1 linear;
	-o-animation: kf_shake 0.4s 1 linear;
}

@-webkit-keyframes kf_shake {
	0% { -webkit-transform: translate(30px); }
	20% { -webkit-transform: translate(-30px); }
	40% { -webkit-transform: translate(15px); }
	60% { -webkit-transform: translate(-15px); }
	80% { -webkit-transform: translate(8px); }
	100% { -webkit-transform: translate(0px); }
}

@-moz-keyframes kf_shake {
	0% { -moz-transform: translate(30px); }
	20% { -moz-transform: translate(-30px); }
	40% { -moz-transform: translate(15px); }
	60% { -moz-transform: translate(-15px); }
	80% { -moz-transform: translate(8px); }
	100% { -moz-transform: translate(0px); }
}

@-o-keyframes kf_shake {
	0% { -o-transform: translate(30px); }
	20% { -o-transform: translate(-30px); }
	40% { -o-transform: translate(15px); }
	60% { -o-transform: translate(-15px); }
	80% { -o-transform: translate(8px); }
	100% { -o-origin-transform: translate(0px); }
}