/* ---- Base ---- */
body {
	background-image: linear-gradient(109.6deg, rgba(45, 116, 213, 1) 11.2%, rgba(121, 137, 212, 1) 91.2%);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* ---- Quiz container ---- */
/* Centered white card that wraps the entire quiz */
.quiz-container {
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	max-width: 768px;
	width: 100%;
	margin: auto;
}

.quiz-questions {
	padding: 3rem 2rem 2rem;
}

/* ---- Typography ---- */
/* Bold styling for question and score counters */
#question-count,
#score-count,
#questions-count {
	font-weight: bold;
}

/* ---- Result view ---- */
/* Centered column layout for the result screen */
.quiz-result {
	text-align: center;
	padding: 3rem 2rem;
	min-height: 500px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

/* Large emoji displayed based on the user's score */
#result-img {
	font-size: 10rem;
}

/* ---- Notes ---- */
/* Correct answer =  .list-group-item-success */
/* Wrong answer =  .list-group-item-danger */