* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: arial;
}

html,
main,
body {
	width: 100%;
	height: 100%;
	background-color: lightgray;
}

#visual-board {
	aspect-ratio: 1 / 1;
	min-width: 100%;
	z-index: -10;
	display: block;
	background-color: white;
}

.board,
.cell {
	aspect-ratio: 1 / 1;
	display: grid;
	grid-template: auto auto auto / auto auto auto;
	border: 0.2rem solid black;
}

.cell {
	min-width: 15px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.cell:hover {
	border-color: aliceblue;
}

.x,
.o {
	color: white;
}

.x {
	background-color: red;
}

.o {
	background-color: blue;
}

.corresponding-highlight {
	border-color: deeppink;
}

.valid-move {
	background-color: #99ee99;
}