* {
	box-sizing: border-box;
	scrollbar-gutter: stable both-edges;
}

body {
	background: #009E60;
	display: grid;
	grid-template-rows: auto 1fr auto;
	font-family: -apple-system, BlinkMacSystemFont,
	"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
	"Fira Sans", "Droid Sans", "Helvetica Neue",
	sans-serif;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
}

form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
}

input,.btn-group {
	margin-top: 1em;
	margin-right: 1.5em;
}

main {
	background: #F6F7EB;
	padding-left: 1em;
	padding-right: 1em;
}

@media only screen and (min-width: 48rem) {
	body {
		max-width:48rem;
		margin-left: auto;
		margin-right: auto;
	}
}

span {
	font-weight: bold;
	padding-bottom: 0.1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.1em;
}
.valid {
	background: #009E60;
	color: #F6F7EB;
}
.invalid {
	background: #E94F37;
}