h2, h3 {
	font-family: 'Ad Lib', 'Garfield', 'Comic Sans MS', sans-serif;
	text-transform: uppercase;
}
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; margin-top: .5em; }

.options-container {
	margin: 0 auto;
	max-width: 1300px;
}
.options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: min(8%,1.5em);
}
.option {
	width: max(150px, min(200px, 45%));
	position: relative;
}
.option .checkbox, .option img {
	border-radius: .5em;
	border: var(--default-border);
	box-shadow: var(--default-shadow);
	margin-bottom: 5px;
}
.option .checkbox {
	position: absolute;
	top: -5%; left: -5%;
	background: var(--white);
	width: 25%;
	padding: 2% 2% 3% 3%;
	webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	aspect-ratio: 1;
}
.option:has(:checked) .checkbox:after {
	content: '';
	display: block;
	width: 100%; height: 100%;
	background-image: url('../images/paw_off.svg');
	background-size: 100%;
	background-repeat: no-repeat;
}
.option input {
	width: 0px; height: 0px; padding: 0px; margin: 0px;
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
	opacity: 0;
}
.option img {
}
.option:has(:focus-visible) img {
	outline: 2px var(--white) solid;
}
.option .name {
	display: inline-block;
	max-width: 100%;
	min-height: 1.5em;
	margin-bottom: 1.25em;
	font-size: .85em;
}
.yellowbutton {
	border-radius: 1em;
	font-size: 1.5rem;
}