body {
	display: grid;
	grid-template:
		"heading heading" min-content
		"error   error" min-content
		"input   output" 1fr /
		1fr      1fr;
	min-height: 100%;
	font-family: sans-serif;
}
@media (max-width: 40em) {
body {
	grid-template:
		"heading" min-content
		"error" min-content
		"input" auto
		"output" auto /
		auto;
}
}
h1 {
	grid-area: heading;
	margin: 0 0 .2em;
	text-align: center;
}
#input {
	grid-area: input;
	place-self: center;
	margin: 1em auto;
}
#input td {
	text-align: center;
}
.pet-form {
	margin: .2em;
}
.pet-form figcaption {
	font-size: 14px;
	font-family: sans-serif;
}
.pet-form > div {
	display: flex;
	justify-content: center;
}
.pet-form input[type=number] {
	width: 2.4em;
}
#output {
	grid-area: output;
	place-self: center;
	display: flex;
	flex-flow: column;
	place-items: center;
	place-content: center;
	gap: 2em;
}
#output {
	.pet-set {
		display: flex;
		flex-flow: column;
		text-align: center;
		gap: .3em;

		p {
			margin: 0;
		}
		p.bonuses {
			display: flex;
			gap: 1em;

			small {
				white-space: pre;
			}
		}
		.pet-list {
			display: flex;
			justify-content: center;
			gap: 1em;
		}
	}
}

#output .error {
	background: darkred;
	color: white;
	padding: 2em;
	margin: 1em;
	text-wrap: balance;
	text-align: center;
}