capitals_quiz/src/game_styles.css

:root {
	--a-color: var(--red);
	--b-color: var(--yellow);
	--c-color: var(--green);
	--d-color: var(--blue);
	--question-country-color: var(--teal);
}

.correct {
	animation: correct .5s;
}

.incorrect {
	animation: incorrect .5s;
}

@keyframes correct {
	0%   { background: var(--default-bg); }
	50%  { background: var(--green); }
	100% { background: var(--default-bg); }
}

@keyframes incorrect {
	0%   { background: var(--default-bg); }
	50%  { background: var(--red); }
	100% { background: var(--default-bg); }
}

#toprow {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media only screen and (max-width: 600px) {
	#toprow {
		flex-direction: column-reverse;
	}
}

#question {
	font-size: 1.5em;
}

#score {
	--good: var(--green);
	--okay: var(--yellow);
	--bad: var(--red);
	background: var(--good);
}

#game .answer {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
}

#game .answer .text {
	width: 50%;
}

#game .answer .letter {
	font-size: 1.5em;
	padding: 1em;
	border: 0.05em var(--default-bg) solid;
	border-radius: 0.25em;
}

#a {
	background-color: var(--a-color);
	border-color: var(--a-color);
}

#b {
	background-color: var(--b-color);
	border-color: var(--b-color);
}

#c {
	background-color: var(--c-color);
	border-color: var(--c-color);
}

#d {
	background-color: var(--d-color);
	border-color: var(--d-color);
}

span#questionCountry {
	background-color: var(--question-country-color);
}

#region_selector {
	width: 100%;
	background: var(--dark-bg);
	font-size: 1.5em;
	padding: 1em;
	border: none;
	border-radius: 0.25em;
	box-sizing: border-box;
}

#settings {
	width: 100% 
}

#selector_results {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#settings .selector_result {
	margin: 1em;
}