style.css

@media (prefers-color-scheme: light) {
	:root {
		--chess-background: hsl(0, 0%, 100%);
		--chess-border: hsl(30, 1%, 40%);
		--chess-title-background: hsl(0, 0%, 80%);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--chess-background: hsl(30, 7%, 18%);
		--chess-border: hsl(30, 1%, 40%);
		--chess-title-background: hsl(30, 1%, 40%);
	}
}

[data-theme="chess-board-green"] {
	--chess-light-square: hsl(33, 100%, 88%);
	--chess-dark-square: hsl(80, 60%, 35%);
	--chess-hl-1: hsla(180, 100%, 40%, 50%);
	--chess-hl-2: hsla(7, 79%, 62%, 80%);
	--chess-hint1: hsla(0, 0%, 0%, 30%);
}

[data-theme="chess-board-brown"] {
	--chess-light-square: hsl(38, 66%, 83%);
	--chess-dark-square: hsl(26, 36%, 55%);
	--chess-hl-1: hsla(180, 100%, 40%, 50%);
	--chess-hl-2: hsla(7, 79%, 62%, 80%);
	--chess-hint1: hsla(0, 0%, 0%, 30%);
}

.chess {
	text-align: center;
	margin: auto;
	display: block;
}

.chess-background {
	width: 75%;
	float: none;
	margin:0 auto;
	padding: 0;
	border: 1px solid var(--chess-border);
	background: var(--chess-background);
	clear: both;
	
}

.chess-title {
	text-transform:capitalize;
	font-size: large;
	background-color: var(--chess-title-background);
	display: block;
	width: 100%;
}

.chess-highlight-1 {
	fill:var(--chess-hl-1);
	stroke-width:0;
}

.chess-highlight-2 {
	fill:var(--chess-hl-2);
	stroke-width:0;
}