body {
	font-family: 'Oswald';
	text-align: center;
	background-color: #efefef;
}
.gameboard {
	/*define the gameboard elements as a grid*/
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	height: 70vmin;
	width: 70vmin;
	margin: auto;
}

.box {
	/* Add a flex to each box, then justify content and align items */
	border: 1px solid;
	margin-bottom: -1px;
	margin-right: -1px;
	font-weight: bold;
	font-size: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(70vmin / 3);
	transition: background-color 100ms;
	cursor: pointer;
}
.box:hover:not(.filled):not(.game-over) {
	background-color: #dddddd;
}
.box.filled {
	cursor: default;
}
.box.game-over {
	cursor: default;
}
.box.winning-cell {
	background-color: #dddddd;
}

.score {
	font-family: 'Raleway';
	font-size: 1.1em;
	letter-spacing: 0.05em;
	color: #555;
}

.button {
	border: 0;
	padding: 1.5%;
	font-family: 'Raleway';
	/* font-family: 'Oswald'; */
	font-size: large;
	/* font-weight: bold; */
	color: white;
	background-color: #999999;
	transition: 100ms;
}

.button:hover {
	background-color: #777777;
}