main {
	max-width: 40em;
}

#samplesBar {
	padding: 0.5em;
	background: var(--bgVeryLightGray);
	border-radius: 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
}

#samples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
}

.sample {
	width: 2em;
	height: 2em;
}

#tiles {
	width: 100%;
}

.row {
	display: flex;
}

.tile {
	aspect-ratio: 1/1;
	flex-grow: 1;
}

.light {
	fill: var(--bg1);
}

.darkStroke {
	fill: none;
	stroke: var(--text1);
	stroke-width: 20%;
}

.dark {
	fill: var(--text1);
}

.buttonField {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
}