.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 460px;
	height: 460px;
	background-color: black;
}
.grid div {
	width: 150px;
	height: 150px;
	background-color: white;
	margin-bottom: 5px;
}

.playerX {
	background-image: url("cross.jpg");
}

.playerO {
	background-image: url("circle.png");
}

.result {
	font-size: 24px;
	font-weight: bold;
	color: blue;
}

.horizontal_one::before {
	content: "";
	position: absolute;
	margin-top: 65px;
	border-top: 13px solid blue;
	width: 155px;
	transform: rotate(0deg);
}
.horizontal_two:before {
	content: "";
	position: absolute;
	margin-top: 75px;
	border-top: 13px solid blue;
	width: 155px;
	transform: rotate(0deg);
}
.horizontal_three:before {
	content: "";
	position: absolute;
	margin-top: 70px;
	border-top: 13px solid blue;
	width: 155px;
	transform: rotate(0deg);
}
.vertical:before {
	content: "";
	position: absolute;
	margin-top: 68px;
	border-top: 13px solid blue;
	width: 155px;
	transform: rotate(90deg);
}
.right_diagonal:before {
	content: "";
	position: absolute;
	border-top: 11px solid blue;
	width: 220px;
	transform: rotate(45deg);
	margin-left: -29px;
	margin-top: 74px;
}

.left_diagonal:before {
	content: "";
	position: absolute;
	border-top: 11px solid blue;
	width: 220px;
	transform: rotate(135deg);
	margin-left: -35px;
	margin-top: 67px;
}