/* Setting the margin, border, and box-sizing to 0. */
* {
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

/* Setting the size of the cell, the color of the cell when it is hovered over, the color of the cell
when it is set, and the line width of the X. */
:root {
	--cell-size: 100px;
	--mark-size: calc(var(--cell-size) * .9);
	--color: #81c3fd; /* for hover */
	--color-set: #0275d8; /* when set */
	/*-l: 10px; X line-width */
}

/* Removing the default margin that the browser adds to the body. */
body {
	margin: 0;
    background-color: #e8f0f2;
}

/* Making the font of the text in the span tag Verdana, Geneva, Tahoma, sans-serif, the color of the
text in the span tag #053742, and the font size of the text in the span tag 17px. */
span {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
             
        color: #053742;
        font-size: 17px;
}

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

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

/* remove border for edges */
/* Removing the top border of the first, second, and third cells. */
.cell:nth-child(1), .cell:nth-child(2), .cell:nth-child(3) {
	border-top: none;
}

/* Removing the left border of the first, fourth, and seventh cells. */
.cell:nth-child(1), .cell:nth-child(4), .cell:nth-child(7) {
	border-left: none;
}

/* Removing the right border of the third, sixth, and ninth cells. */
.cell:nth-child(3), .cell:nth-child(6), .cell:nth-child(9) {
	border-right: none;
}

/* Removing the bottom border of the 7th, 8th, and 9th cells. */
.cell:nth-child(7), .cell:nth-child(8), .cell:nth-child(9) {
	border-bottom: none;
}

/* Making the cursor not allowed when the cell is an x or a circle. */
.cell.x, .cell.circle {
	cursor: not-allowed;
}

/* Making the background color of the cell when it is hovered over. */
.cell.x::before,
.cell.x::after,
.cell.circle::before {
	background-color: #026bc6;
} 

/* Making the background color of the cell when it is hovered over. */
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after,
.board.circle .cell:not(.x):not(.circle):hover::before {
	background-color: #81c3fd;
}

/* Making the X. */
.cell.x::before,
.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after {
	content: ' ';
	position: absolute;
	width: calc(var(--mark-size) * .15);
	height: var(--mark-size);
}

/* Rotating the X by 45 degrees. */
.cell.x::before,
.board.x .cell:not(.x):not(.circle):hover::before {
	transform: rotate(45deg);
}

/* Making the X. */
.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::after {
	transform: rotate(-45deg);
}

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

/* Making the width and height of the circle. */
.cell.circle::before,
.board.circle .cell:not(.x):not(.circle):hover::before {
	width: var(--mark-size);
	height: var(--mark-size);
}

/* Making the background color of the button white, the color of the text white, and the border color
white. */
.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::after {
	width: calc(var(--mark-size) * .7);
	height: calc(var(--mark-size) * .7);
	background-color: #e8f0f2;
}

/* display game results */
/* Making the winning message. */
.winner-message {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-set);
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 5rem;
	font-family: 'Courier New', Courier, monospace;
	flex-direction: column;
}

/* Making the button for the winning message. */
.winner-message button {
	border-radius: 10px;
	font-size: 3rem;
	background-color: white;
	border: 1px solid var(--color-set);
	padding: .25em .5em;
	cursor: pointer;
}

/* Making the background color of the button white, the color of the text white, and the border color
white. */
.winner-message button:hover {
	background-color: var(--color-set);
	color: white;
	border-color: white;
}

/* Making the winning message show. */
.winner-message.show {
	display: flex;
}