:root {
	--cell-size: 100px;

	--color: #81c3fd; /* for hover */
	--color-set: #0275d8; /* when set */
	--l: 10px; /* X line-width */
}



body {
	margin: 0;
}

.board {
	display: grid;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
	grid-template-columns: repeat(3, auto);
	margin: auto;
	padding:20px;
}

.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
For a given cell we specify that there should not be a border. We select a 
cell using the nth-child selector where you write the number of a cell 
to select that element/cell. */
.cell:nth-child(1), .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;
}

/* Here we determine that there is no hover effect 
if the cell is already filled with one of our two characters. */
.cell.x, .cell.circle{
    cursor:not-allowed;
}

/* for cross */
.board.x .cell:not(.circle):not(.x):hover {
	background: linear-gradient(to top right, transparent calc(50% - var(--l) / 2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2)),
				linear-gradient(to bottom right, transparent calc(50% - var(--l) / 2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2));
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
}

/* for cross (set) */
.cell:not(.circle).x {
	background: linear-gradient(to top right, transparent calc(50% - var(--l) / 2), var(--color-set) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2)),
				linear-gradient(to bottom right, transparent calc(50% - var(--l) / 2), var(--color-set) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2));
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
}

/* for circle */
.board.circle .cell:not(.circle):not(.x):hover {	
	background: radial-gradient(var(--color) 60%, transparent 60%);
}

/* for circle (set) */
.cell:not(.x).circle {
	background: radial-gradient(var(--color-set) 60%, transparent 60%);
}

.winning-message {
	display: none;
	background-color: var(--color-set);
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 5rem;
	flex-direction: column;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-radius: 20px;
}



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