/* anything inside of 'body' affects all elements on the webpage. */
body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/* using a # means we are modifying an element with 
   the ID 'quiz-container'. */
#quiz-container {
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	width: 300px;
}

/* using a . means we are modifying all elements with 
   the CLASS 'question' so this affects all of the questions on the page. */
.question {
	margin-bottom: 20px;
}

/* This applies to our submit button */
button {
  background: #007BFF;
	color: #fff;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
}

/* This affects our button, but only when the mouse 
   is hovering over the button. */
button:hover {
	background: #0056b3;
}

/* We are modifying the element with the ID 'result' */
#result {
	margin-top: 20px;
}