.colLeft, .colRight {
	float: left;
}
input:focus {
	background-color: linen;
}
input:user-invalid {
	border-style: solid;
	border-width: 2px;
	border-color: red;
	border-radius: 5px;
}
input:user-valid {
	border-style: solid;
	border-width: 1px;
	border-color: green;
	border-radius: 5px;
}
textarea:focus {
	background-color: linen;
}
button[type=submit] {
	font-weight: bold;
}
button[type=submit]:enabled:hover {
	background-color: palegreen;
}
.formError {
	color: brown;
	font-weight: bold;
	clear: both;
}

@keyframes pound {
	from {transform: rotate(0deg)}
	to {transform: rotate(-31deg)}
}
main svg {
	display: none;
	overflow: visible;
	position: fixed;
	z-index: 1;
	top: 50vh;
	left: 50vw;
/*
	border: 1px solid #000;
	margin-top: -96px;
	margin-left: -133px;
*/
}
#hammer {
	transform-origin: right bottom;
	animation-name: pound;
	animation-duration: 800ms;
	animation-timing-function: ease-in;
	animation-iteration-count:infinite;
	animation-direction: alternate;
}