body {
	margin: 1em 5% 3em 5%;
	font-family: sans-serif;
	background-color: #fbf0e0;
	color: #000;
}

header {
	text-align: right;
	display: flow-root;
	border-bottom: 1px solid #4731ae;
	margin: 0 -5% 1em -5%;
	padding-top: 0.28em;
	padding-left: 5%;
	padding-right: 5%;
	overflow: hidden;
}

header img {
	float: left;
	max-height: 3em;
	position: relative;
	top: -0.28em;
}

header a:not(:first-child) {
	box-sizing: border-box;
	display: inline-block;
	height: 3em;
	padding-top: 1.5em;
}

body > h1 {
	text-align: center;
}

body > h1 + p {
	text-align: center;
}

.success {
	background-color: #61d97c;
	border-radius: 1em;
	padding: 2em;
	max-width: 40em;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.note {
	background-color: #51D4E9;
	border-radius: 1em;
	padding: 2em;
	max-width: 40em;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.warning {
	background-color: #FFC71E;
	border-radius: 1em;
	padding: 2em;
	max-width: 40em;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.error {
	background-color: #E94655;
	border-radius: 1em;
	padding: 2em;
	max-width: 40em;
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

form {
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

form input, form button {
	font-size: 1.5em;
	padding: 0.3em;
}

.table {
	display: inline-block;
	max-width: 80vw;
	overflow-x: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

table td {
	padding: 0.25em 0.5em 0.25em 0.5em;
	white-space: nowrap;
}
