main {
	padding-inline: 2em;
}
.options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 3em;
	gap: 2em;
}

.option {
	border-radius: 0.635em;
	display: inline;
	padding: 1em;
	border: 0.1875em var(--accent) solid;
}

.option:has(input:checked) {
	background-color: #d5d5d5;
}

.option > label,
.option > input {
	cursor: pointer;
}

button {
	padding: 1em;
	background-color: var(--accent);
	border: none;
	outline: none;
	color: white;
	font-size: 1em;
	border-radius: 0.635em;
}

button:hover {
	cursor: pointer;
	background-color: var(--accent-light);
}

.score-container {
	font-size: 1.5em;
}

.score {
	color: var(--accent);
}

@media (width < 680px) {
	.options {
		grid-template-columns: 1fr;
	}
}
