:root {
	--cell-size: 100px;
 
	--color: red; /* for hover */
	--color-set: green; /* when set */
   
	--l: 10px; /* X line-width */
}
body {
	margin: 0;
}

.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: 1px solid white;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
}
/* remove border for edges */
.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;
}
.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;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	justify-content: center;
	align-items: center;
	color: black;
	font-size: 5rem;
	font-family: 'Courier New', Courier, monospace;
	flex-direction: column;
    background-size:cover;
    background-image: url('hisoka.gif');
}
.winning-message button {
	border-radius: 10px;
	font-size: 3rem;
	background-color: white;
	border: 1px solid var(--color-set);
	padding: .25em .5em;
	cursor: pointer;
}

.winning-message button:hover {
	background-color: var(--color-set);
	color: white;
	border-color: white;
}
.winning-message.show {
	display: flex;
}
.circle{
    background-image: url("Dio.gif");
    
    background-size:cover;
}
.x{
    background-image: url("kirby.gif");
    background-size: cover;
}