body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 20px;
		}

		h1 {
			text-align: center;
		}

		#quiz-container {
			margin-top: 20px;
			text-align: center;
		}

		h2 {
			margin-bottom: 10px;
		}

		button {
			display: block;
			margin: 10px auto;
			padding: 10px 20px;
			background-color: #4caf50;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			transition: background-color 0.3s;
		}

		button:hover {
			background-color: #45a049;
		}

		p {
			margin-bottom: 10px;
		}

		/* Responsive Styles */

		@media (max-width: 600px) {
			h1 {
				font-size: 24px;
			}

			h2 {
				font-size: 20px;
			}

			button {
				font-size: 14px;
			}
		}

		@media (max-width: 400px) {
			h1 {
				font-size: 20px;
			}

			h2 {
				font-size: 18px;
			}

			button {
				font-size: 12px;
			}
		}

		#timer {
			text-align: center;
			font-size: 24px;
			margin-bottom: 20px;
	
		}
		#progressBarContainer {
  width: 100%; /* Set container width to occupy the device width */
}

#progressBar {
  width: 100%; /* Set progress bar width to occupy the device width */
  height: 20px; /* Set the desired height of the progress bar */
  background-color: #f0f0f0; /* Set the background color of the progress bar */
  border: 1px solid #ccc; /* Add a border for visual aesthetics */
  border-radius: 10px; /* Round the corners of the progress bar */
}

/* Adjust the appearance of the progress bar fill */
#progressBar::-webkit-progress-value {
  background-color: #007bff; /* Set the fill color for WebKit browsers */
}

#progressBar::-moz-progress-bar {
  background-color: #007bff; /* Set the fill color for Firefox browsers */
}