:root {
	--detail: 60deg;
}
details {
	position: relative;
	margin: 0 20px;
}

details.selected0 {
	background-color: hsl(var(--detail), 80%, 80%);
	color: black;
}
details.selected1 {
	background-color: hsl(var(--detail), 100%, 60%);
	color: black;
}
details.selected2 {
	background-color: hsl(var(--detail), 80%, 60%);
	color: black;
}
details.selected3 {
	background-color: hsl(var(--detail), 100%, 40%);
	color: black;
}
details.selected4 {
	background-color: hsl(var(--detail), 80%, 40%);
	color: black;
}
details.selected5 {
	background-color: hsl(var(--detail), 100%, 20%);
	color: white;
}
details.selected6 {
	background-color: hsl(var(--detail), 80%, 20%);
	color: white;
}
article > details {
	background-color: hsl(60deg, 0%, 20%);
}
article > details > details {
	background-color: hsl(60deg, 16%, 21%);
}
article > details > details > details {
	background-color: hsl(60deg, 30%, 22%);
}
article > details > details > details > details {
	background-color: hsl(60deg, 44%, 23%);
}
article > details > details > details > details > details {
	background-color: hsl(60deg, 58%, 24%);
}
article > details > details > details > details > details > details {
	background-color: hsl(60deg, 72%, 25%);
}
article > details > details > details > details > details > details > details {
	background-color: hsl(60deg, 86%, 26%);
}
article > details > details > details > details > details > details > details > details {
	background-color: hsl(60deg, 100%, 27%);
}

summary {
	padding-left: 8px;
}
summary:hover {
	cursor: pointer;
	background: hsl(var(--detail), 100%, 80%);
	color: black;
	border-radius: 10px;
}
summary span {
	opacity: 0;
}
summary:hover span,
details.selected0 > summary span {
	opacity: 1;
}

details.selected0 > summary {
/* 	border: 3px solid black; */
}

summary span,
summary abbr {
	padding: 0 6px;
}

summary abbr {
	text-decoration: underline;
}