body{
	margin: 0;
	min-height: 100vh;
	background-color: #d6c9b8;

	display: flex;
	justify-content: center;
	align-items: center;
}

.container{
	width: 80%;
	height: fit-content;
	min-height: 45vh;

	background-color: white;

	border-radius: 10px;
	box-shadow: 4px 4px 0 black;

	box-sizing: border-box;
	padding: 20px;
}

.active-screen{
	width: 100%;
	height: 100%;

	font-size: 24px;
	font-family: cursive;

	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	text-align: center;
}

.start-btn{
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
}

#start-quiz{
	width: 20%;
	min-width: 150px;

	height: 55px;

	font-size: 24px;
	font-family: cursive;

	border: none;
	border-radius: 10px;
	box-shadow: 2px 2px black;

	background-color: #fcd9ab;

	transition: .2s;
}

#start-quiz:hover{
	background-color: #fecf91;
	cursor: pointer;
	transform: scale(1.1);
}

.quiz-container{
	width: 100%;

	display: none;
	flex-direction: column;

	gap: 15px;

	box-sizing: border-box;
}

.options{
	width: 100%;

	display: flex;
	flex-direction: column;

	gap: 8px;
}

.option{
	height: 50px;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: #ffecd2;

	border: none;
	border-radius: 15px;

	transition: .2s;
}

.option:hover{
	background-color: #ffdeb1;
	cursor: pointer;
	transform: scale(1.01);
}

.correct{
    background: #4CAF50 !important;
    color: white;
}

.wrong{
    background: #F44336 !important;
    color: white;
}

.slider{
	width: 100%;
	height: 15px;

	background: #ddd;

	border-radius: 20px;
	overflow: hidden;
}

.progress{
	width: 0%;
	height: 100%;

	background: orange;

	transition: width .3s ease;
}

.result-container{
	width: 100%;

	display: none;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	font-family: cursive;
	text-align: center;

	gap: 20px;
}

.result-container button{
	width: 180px;
	height: 50px;

	font-size: 20px;
	font-family: cursive;

	border: none;
	border-radius: 10px;

	background: #fcd9ab;
	box-shadow: 2px 2px black;

	cursor: pointer;
	transition: .2s;
}

.result-container button:hover{
	background: #fecf91;
	transform: scale(1.05);
}