body {
	font-family: monospace;
	max-width: 1000px;
	margin: auto;
}

body:not(.loggedin) div:not(#login),
body.loggedin div#login {
	display: none;
}

form fieldset {
	display: grid;
}

div#error {
	padding: 1em;
	background-color: mistyrose;
	margin-bottom: 2em;
}

div#error pre {
	padding: 1em;
	background-color: salmon;
}

button#coffee {
	display: block;
	margin: auto;
	width: 20em;
	height: 20em;
	border-radius: 100%;
	border: solid 1em black;
	background-color: transparent;
	box-sizing: border-box;
	padding: 3em;
}

button#coffee * {
	pointer-events: none;
}

body.coffeup button#coffee {
	pointer-events: none;
	border-color: burlywood;
	animation: coffeup 300ms ease-in-out;
}

@keyframes coffeup {
	0% { transform: rotate(0); }
	25% { transform: rotate(-10deg); }
	75% { transform: rotate(10deg); }
	100% { transform: rotate(0); }
}