body {
	margin: 1vh;
	padding: 0;
	font-size: 4vw;
	text-align: center;
	font-family: "Dosis", sans-serif;
	line-height: 1.8;
	background-color: black;
	color: aliceblue;
	height: 100vh;
}
.top-grid {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.button-container {
	display: flex;
	margin: 1vw 1vw;
}
button {
	margin-top: 1vh;
	margin-left: 4vw;
	font-size: 2vh;
	background-color: rgb(50, 50, 49);
	color: aliceblue;
	padding: 1vh 1vh;
	margin-left: 10px;
	border-radius: 10px;
	border-style: none;
}

button:hover {
	transition: 1s;
	border-radius: 30px;
	background-color: rgb(114, 114, 69);
	cursor: pointer;
}
.grid-container {
	max-width: 80vw;
	max-height: 93vh;
	margin: 0 auto;
	display: grid;
	grid-template-rows: 1fr 12fr 1fr;
	margin-top: -1vh;
}
.game-board {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 1vh;
}
.gamesq {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 8vh;
	background-color: rgb(19, 19, 19);
}
.gamesq:hover {
	transition: 0.5s;
	border-radius: 20px;
	background-color: rgb(32, 32, 32);
}
.taken {
	background-color: rgb(53, 53, 53);
}
.bottom-grid {
	display: flex;
	font-size: 4vw;
	justify-content: start;
}
.bottom-grid > div {
	width: 50%;
	padding-left: 0px;
}
.cross {
	color: yellow;
}
.circle {
	color: blueviolet;
}
.lightmode {
	background-color: aliceblue;
	color: black;
}
.lightmode-cubes {
	background-color: rgb(222, 220, 220);
}
.lightmode-cubes:hover {
	background-color: rgb(208, 196, 196);
}
.lightmode-buttons {
	background-color: rgb(237, 237, 230);
	color: black;
}
.lightmode-buttons:hover {
	background-color: rgb(228, 207, 207);
}