html[data-theme='light'] #points-display,
html[data-theme='light'] #student-name-display,
html[data-theme='light'] #proficiency-display {
	color: black;
	text-shadow: none;
}

html[data-theme='light'] #test-progress-display {
	color: black;
	text-shadow: none;
}

html[data-theme='light'] #app[data-selected-game-mode='flashcards'] #flashcard-display {
	border: 2px solid oklch(0.7 0.075 250);
	background-color: oklch(0.88 0.1 250);
	color: oklch(0.2 0.065 265);
	text-shadow: none;
	box-shadow:
		inset 0 1px 0 oklch(1 0 0 / 65%),
		0 2px 5px oklch(0.25 0.04 270 / 16%);
}

html[data-theme='light']
	#app[data-selected-game-mode='flashcards'][data-answer-state='waiting']
	#flashcard-display {
	background-color: oklch(0.84 0.12 250);
}

html[data-theme='light'] #answer-display {
	color: white;
}

html[data-theme='light'] #keypad button {
	border: 2px solid oklch(0.72 0.035 275);
	color: oklch(0.22 0.035 278);
	box-shadow:
		inset 0 1px 0 oklch(1 0 0 / 70%),
		0 2px 4px oklch(0.25 0.03 278 / 14%);
}

html[data-theme='light'] .num-button {
	background-color: oklch(0.91 0.045 245);
}

html[data-theme='light'] .special-button {
	border-color: oklch(0.76 0.07 310);
	background-color: oklch(0.9 0.07 310);
}

html[data-theme='light'] .op-button {
	border-color: oklch(0.76 0.065 95);
	background-color: oklch(0.91 0.075 95);
}

html[data-theme='light'] #go-button {
	border-color: oklch(0.64 0.105 148);
	background-color: oklch(0.82 0.13 148);
	color: oklch(0.2 0.06 148);
	font-weight: 700;
}

html[data-theme='light'] #keypad button:active {
	filter: brightness(0.94);
	box-shadow: inset 0 2px 4px oklch(0.25 0.03 278 / 18%);
}