index.css

:root {
	--dark-tile-clr: hsl(28, 37%, 55%);
	--light-tile-clr: hsl(38, 69%, 82%);
	--last-move-clr: hsla(90, 100%, 60%, 0.6);
	--legal-move-clr: hsla(90, 55%, 52%, 0.756);
	--tile-size: 4.5rem;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	margin: 0;
}
.board {
	display: grid;
	width: fit-content;
	grid-template-columns: repeat(8, var(--tile-size));
	grid-template-rows: repeat(8, var(--tile-size));
	user-select: none;
}
.tile {
	position: relative;
}
.tile.light {
	background-color: var(--light-tile-clr);
}
.tile.dark {
	background-color: var(--dark-tile-clr);
}
.tile.last-move::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--last-move-clr);
}
.tile.legal-move::after {
	content: '';
	position: absolute;
	width: 30%;
	height: 30%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--legal-move-clr);
}
.tile.legal-capture::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border: 5px solid var(--legal-move-clr);
}
.tile.legal-move.hovered::after,
.tile.legal-capture.hovered::after {
	background-color: var(--legal-move-clr);
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: none;
}
.piece {
	z-index: 1;
	aspect-ratio: 1;
	width: var(--tile-size);
	position: absolute;
	pointer-events: none;
	user-select: none;
	left: var(--x, 0);
	top: var(--y, 0);
}
.piece.ghost {
	opacity: 0.6;
}
.dragging {
	left: calc(var(--x, 0) - (var(--tile-size) / 2));
	top: calc(var(--y, 0) - (var(--tile-size) / 2));
}
.hidden,
.imagePreloading {
	display: none;
}