* {
	box-sizing: border-box;
	font-family: sans-serif;
}

html,
body,
form {
	margin: 0;
	padding: 0;
	height: 100%;
}

textarea,
input[type="text"] {
	font-family: monospace;
}

button,
input[type="button"],
input[type="submit"] {
	font-size: 1rem;
	padding: 0.5rem;
	margin: 0;
	margin-bottom: 0.25rem;
	border: none;
	vertical-align: middle;
	border-radius: 0.25rem;
	background: #e8e8ff;
	color: #6767b2;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
	outline: none;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
	background: #6767b2;
	color: #fff;
}

body {
	display: grid;
	grid-template-rows: auto 1fr;
	background: #ccccff;
	color: #6767b2;
}

body>header {
	background: #fff;
	padding: 1rem 2rem;
	font-size: 1.25rem;
	border-bottom: solid 0.25rem #6767b2;
}

body>main {
	padding: 1rem;
	height: 100%;
}

section {
	background: #fff;
	border-bottom: solid 0.25em #6767b2;
	display: inline-block;
	vertical-align: top;
	padding: 1rem;
	border-radius: 0.5rem;
}

section>header {
	background: #e8e8ff;
	color: #6767b2;
	padding: 0.5rem 1rem;
	margin: -1rem;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	border-top-right-radius: 0.5rem;
	border-top-left-radius: 0.5rem;
}

label {
	background: #e8e8ff;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	border-radius: 0.25rem;
}