body {
	background-color: lightsteelblue;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	height: 100vh;
	min-width: unset;
}

.page.game {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	padding: 0.5rem;
}

.page.game nav {
	display: flex;
	justify-content: end;
}

.page.game nav button {
	padding: 0.25rem 0.5rem;
	background-color: var(--cw-orange);
	color: var(--cw-light);
	font-size: 1.25rem;
	border-radius: 0.25rem;
}

.gameHeaderArea {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

.gameHeaderArea .score {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(3, auto);
}

.gameHeaderArea .label {
	font-weight: bold;
	text-align: right;
	padding-right: 0.5rem;
}

.gameHeaderArea .number {
	text-align: right;
}

.playArea {
	/* display: grid; */
	/* grid-template-rows: auto auto; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.playArea .question {
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 3rem;
}

.answerGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* width: 75%; */
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.answerGrid .answerArea {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	border: 0.02rem solid;
	font-size: 1.1rem;
	cursor: pointer;
}

.answerGrid .answerArea.correctAnswer {
	background-color: green;
	color: white;
}

.answerGrid .answerArea.incorrectAnswer {
	background-color: red;
	color: white;
}

.answerGrid .answerArea .number {
	font-size: 1.25rem;
	font-weight: bold;
	justify-self: center;
	padding: 0 0.5rem;
	border-right: 0.01rem solid;
	height: 100%;
	display: flex;
	align-items: center;
}

.answerGrid .answerArea .answer {
	padding: 0.25rem 0.5rem;
}

.gameFooterArea .questionMeta,
.gameFooterArea .score {
	display: grid;
	grid-template-columns: auto auto;
	border: 2px solid;
	border-radius: 0.2rem;
	padding: 0.25rem;
}

/* grid-template-rows: repeat(3, auto); */

.gameFooterArea .label {
	text-align: right;
	font-weight: bold;
	padding-right: 0.5rem;
}

.gameFooterArea .value {
	text-transform: capitalize;
}

.gameFooterArea {
	display: grid;
	grid-template-columns: auto 1fr auto;
	/* display: flex;
	align-items: center; */
	justify-content: space-around;
	margin-bottom: 2rem;
}

.gameFooterArea .nextQuestionBtn {
	font-size: 2rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background-color: var(--cw-primary);
	color: var(--cw-light);
}

form.questionFilter {
	display: flex;
	flex-wrap: wrap;
}

form.questionFilter .filterBtns {
	display: grid;
	grid-template-columns: 1fr 4fr;
	gap: 0.5rem;
	width: 100%;
}

form.questionFilter button {
	font-size: 1.1rem;
	padding: 0.25rem;
	margin-top: 0.25rem;
	border-radius: 0.2rem;
	cursor: pointer;
}

form.questionFilter button[type="submit"] {
	color: var(--cw-light);
	background-color: var(--cw-primary);
}

form.questionFilter button[type="reset"] {
	color: var(--cw-light);
	background-color: var(--cw-orange);
}

/* =============================================== Result msgBox ==================================== */
.msgBox .gameResult {
	padding: 0.5rem;
}

.msgBox .gameResult .scoreBasedBitmoji {
	width: 100%;
}

.msgBox .gameResult .resultScore {
	font-size: 1.5rem;
	text-align: center;
}