*, *::after, *::before {
	box-sizing: border-box;
}

:root {
	--cell-size: 100px;
	--mark-size: calc(var(--cell-size) * 0.9);
}

.board {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;


}



.cell {
	width: var(--cell-size);
	height: var(--cell-size);
	/*background-color: black;*/
	border: 1px solid black;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
}


.cell.x,
.cell.o {
	cursor: not-allowed;
}

.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3)
 {
	border-top: none;
}
.cell:nth-child(1),
.cell:nth-child(4),
.cell:nth-child(7) {
	border-left: none;
}

.cell:nth-child(3),
.cell:nth-child(6),
.cell:nth-child(9) {
	border-right: none;
}

.cell:nth-child(7),
.cell:nth-child(8),
.cell:nth-child(9) {
	border-bottom: none;
}

.cell.x::before,
.cell.x::after,
.cell.o::after,
.cell.o::before {
	background-color: black;
}



.board.x .cell:not(.x):not(.o):hover::before,
.board.x .cell:not(.x):not(.o):hover::after,
.board.o .cell:not(.x):not(.o):hover::after,
.board.o .cell:not(.x):not(.o):hover::before
 {
	background-color: lightgrey;
}




.cell.x::after,
.cell.x::before,
.board.x .cell:not(.x):not(.o):hover::before,
.board.x .cell:not(.x):not(.o):hover::after
 {
	content: "";
	position: absolute;
	width: calc(var(--mark-size) * 0.15);
	height: calc(var(--mark-size));
	/*background-color: black;*/

}
.cell.x::after,
.board.x .cell:not(.x):not(.o):hover::after
{
	transform: rotate(45deg);
	/*background-color: ligh;	*/
}
.cell.x::before,
.board.x .cell:not(.x):not(.o):hover::before
 {
	transform: rotate(-45deg);	
	/*background-color: lightgrey;	*/
}




.cell.o::after,
.cell.o::before,
.board.o .cell:not(.x):not(.o):hover::before,
.board.o .cell:not(.x):not(.o):hover::after
 {
	content: "";
	position: absolute;
	width: var(--mark-size);
	height: var(--mark-size);
	border-radius: 50%;

}

.cell.o::after,
.board.o .cell:not(.x):not(.o):hover::after {
	width: calc(var(--mark-size) * 0.7);
	height: calc(var(--mark-size) * 0.7);
	background-color: white;
}


.winning-message {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 5rem;
	flex-direction: column;
}

.winning-message button {
	background: white;
	font-size: 3rem;
	border: 1px solid black;
	padding: .25em .5em;
	cursor: pointer;
}

.winning-message button:hover {
	background-color: black;
	color: white;
	border-color: white;
}

.winning-message.show {
	display: flex;
}