body {
	background-color: #f0f0f0;
}
.option-label {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 0.5rem;
	padding-left: 2rem;       /* space for the icon */
	text-indent: -1.5rem;     /* pull back the first line */
}
.option-label .check-icon {
	margin-right: 0.5rem;
}
.result-icon {
	width: 48px;
	height: 48px;
	vertical-align: middle;
	margin-left: 4px;
}

.animal-row {
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.animal-icon {
	height: 48px;
	margin: 0 6px;
	transition: 0.3s;
}
.animal-icon.active {
	filter: none;
}
.animal-icon:not(.active) {
	filter: grayscale(100%);
	opacity: 0.3;
}

/* Hidden by default */
#trait-descriptions .trait-desc { 
	display: none; 
	position: relative; 
	padding-top: 58px; /* room for the corner icon */
}
/* Show when active */
#trait-descriptions .trait-desc.active { 
	display: block; 
}
/* Top-left icon */
.trait-icon {
	position: absolute;
	top: 12px;
	left: 12px;
	height: 44px;
	width: auto;
}
/* Nice spacing for title */
#trait-descriptions h4 { 
	margin-top: 3rem; 
}