body {
	font: 100%/1.5 system-ui, sans-serif;
	margin: 0;
}

fieldset {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	border: 1px solid hsl(220 10% 90%);
	border-radius: .2em;
}

h1 {
	padding: 2rem;
	margin: 0;
	background: hsl(180 50% 50%);
	color: hsl(0 0% 20% / .5);
	letter-spacing: -.03em;
	font-size: 300%;
}

h1 .black {
		color: black;
	}

h1 .white {
		color: white;
	}

main {
	padding: 1em;
}

#colors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5ch, 1fr));
	gap: .3em;
	margin-top: 1em;

}

#colors > div {
	padding: .3em .5em;
	border-radius: 1px;
}

[data-order="l"] :is(#colors > div) {
		order: var(--l);
	}

[data-order="c"] :is(#colors > div) {
		order: var(--c);
	}

[data-order="h"] :is(#colors > div) {
		order: var(--h);
	}

.show-changes .changed {
	outline: 2px dashed orange;
	outline-offset: 1px;
	box-shadow: 0 0 0 4px hsl(0 0% 40%);
}

#previous_algo:empty::before {
	content: "previous";
}

#current_algo:empty::before {
	content: "current algorithm";
}