#content {
	display: grid;
	grid-template-rows: 1fr 3fr 1fr 1fr 1fr;
	gap: 1rem;
	/* font-size: 1.5em; */
	margin: 1rem auto;
}

#content * {
	font-size: 1em;
}

@media (orientation: landscape) {
	#content {
		width: 80vh;
	}						
}

@media (orientation: portrait) {
	#content {
		width: 90vw;
	}						
}

#range {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#range > * {
	align-self: center;
	justify-self: center;
	text-align: center;
}

#range section.range-marker * {
	margin: 0;
}

#range-graphic-lowest,
#range-graphic-highest {
	transition: 0.25s ease-in-out;
}

#result {
	font-size: 1.25em;
	align-self: center;
}

#result, label {
	text-align: center;
	padding: 1rem 0;
}

#range, #result, label {
	color: #666;
}

#guess:focus::placeholder {
	color: transparent;
}