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

:root
{
	--cell-size:100px;
	--mark-size:calc(var(--cell-size) * .5);
	--player1-color:#dc685a;
	--player2-color:#ecaf4f;
	--hover-color:#3d4250;
	--hover-bg:#fff;
	--cell-color:#78bec5;
}

body
{
	margin:0;
	padding:0;
	/*background:black;*/
}

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

.cell
{
	width:var(--cell-size);
	height:var(--cell-size);
	border:5px solid var(--hover-bg);
	border-radius:1em;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	cursor:pointer;
	background:var(--cell-color);
	transition: 0.3s all ease;
}

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

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


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

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

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

.cell:not(.x):not(.o):hover
{
	background:var(--hover-color);
}

.cell.x
{
	background:var(--player1-color);
}

.cell.o
{
	background:var(--player2-color);
}

.cell.x::before,
.cell.x::after,
.cell.o::before
{
	background:var(--hover-bg);
}

.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::before
{
	background:lightgrey;
}

.cell.x::before,
.cell.x::after,
.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) * .15);
	height:var(--mark-size);
}

.cell.x::before,
.board.x .cell:not(.x):not(.o):hover::before
{
	transform:rotate(45deg);
}

.cell.x::after,
.board.x .cell:not(.x):not(.o):hover::after
{
	transform:rotate(-45deg);
}

.cell.o::before,
.cell.o::after,
.board.o .cell:not(.x):not(.o):hover::before,
.board.o .cell:not(.x):not(.o):hover::after
{
	content:'';
	position:absolute;
	border-radius:50%;
}

.cell.o::before,
.board.o .cell:not(.x):not(.o):hover::before
{
	width:var(--mark-size);
	height:var(--mark-size);
}

.cell.o::after
{
	width:calc(var(--mark-size) * .5);
	height:calc(var(--mark-size) * .5);
	background:var(--player2-color);
}

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

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

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

.winning-message:hover
{
	background:black;
	color:var(--hover-bg);
	border-color:var(--hover-bg);
}

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