style.scss

$color_1: rgb(80, 80, 184);
$color_2: blue;
$color_3: white;
$color_4: #fff;
$color_5: rgb(56, 197, 207);
$color_6: #004085;
$color_7: #23903c;
$color_8: #a42834;
$color_9: #155724;
$color_10: #721c24;
$color_11: #007bff;
$font-family_1: 'Poppins', sans-serif;
$border-color_1: #b8daff;
$border-color_2: #23903c;
$border-color_3: #a42834;
$border-color_4: #c3e6cb;

/* FONTS */
@import "https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap";
/*Start quiz button*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
	text-decoration: none;
	outline: none;
	border: none;
	font-family: $font-family_1;
}
body {
	background: rgb(80, 80, 184);
}
.start_btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 4px 8px 0 rgba(0, 0,0, 0.2), 0px 6px 20px 0 rgba(0, 0,0, 0.19);
	transition: all 0.3s ease;
	button {
		font-size: 25px;
		font-weight: 500;
		color: $color_1;
		padding: 15px 30px;
		background: #fff;
		border-radius: 5px;
		cursor: pointer;
		border: none;
	}
}
.info_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 4px 8px 0 rgba(0, 0,0, 0.2), 0px 6px 20px 0 rgba(0, 0,0, 0.19);
	transition: all 0.3s ease;
	width: 540px;
	background: #fff;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%,-50%),scale(.9);
	.info_title {
		display: flex;
		align-items: center;
		padding: 0 30px;
		font-size: 20px;
		font-weight: 600;
		height: 60px;
		width: 100%;
		border-bottom: 1px solid lightgrey;
	}
	.info_list {
		padding: 15px 35px;
		.info {
			margin: 5px 0;
			font-size: 17px;
			span {
				font-weight: 600;
				color: $color_2;
			}
		}
	}
	.buttons {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 35px;
		border-top: 1px solid lightgrey;
		button {
			margin: 0 5px;
			height: 40px;
			width: 100px;
			border: 1px solid rgb(56, 197, 207);
			border-radius: 5px;
			color: $color_3;
			font-size: 16px;
			text-align: center;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
		}
	}
}
.quiz_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 4px 8px 0 rgba(0, 0,0, 0.2), 0px 6px 20px 0 rgba(0, 0,0, 0.19);
	transition: all 0.3s ease;
	width: 550px;
	background: #fff;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%,-50%),scale(.9);
	header {
		position: relative;
		z-index: 99;
		height: 70px;
		padding: 0 30px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 5px 5px 0 0;
		box-shadow: 0 3px 5px 1px rgba(0, 0,0, 0.1);
		.title {
			font-size: 20px;
			font-weight: 600;
		}
		.timer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 145px;
			height: 45px;
			background: #cce5ff;
			border: 1px solid #b8daff;
			padding: 0 8px;
			.time_text {
				font-size: 17px;
				font-weight: 400;
				user-select: none;
			}
			.timer_sec {
				font-size: 18px;
				font-weight: 500;
				color: $color_4;
				background: #343a40;
				height: 30px;
				width: 45px;
				text-align: center;
				line-height: 30px;
				border-radius: 5px;
				border: 1px solid #343a40;
				user-select: none;
			}
		}
	}
	section {
		padding: 25px 30px 20px 30px;
		background: #fff;
		.que_text {
			font-size: 25px;
			font-weight: 600;
		}
		.option_list {
			display: block;
			padding: 20px 0;
		}
	}
	footer {
		height: 60px;
		width: 100%;
		padding: 0 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.total_que {
			span {
				display: flex;
				user-select: none;
			}
		}
	}
}
.result_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 4px 8px 0 rgba(0, 0,0, 0.2), 0px 6px 20px 0 rgba(0, 0,0, 0.19);
	transition: all 0.3s ease;
	background: #fff;
	width: 450px;
	padding: 25px 30px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%,-50%),scale(.9);
	.icon {
		font-size: 100px;
		color: $color_11;
		margin-bottom: 10px;
	}
	.score_text {
		span {
			font-size: 18px;
			font-weight: 500;
			display: flex;
			margin: 10px 0;
		}
	}
	.buttons {
		display: flex;
		margin: 20px 0;
		button {
			font-size: 18px;
			font-weight: 500;
			margin: 0 10px;
			padding: 0 20px;
			border: none;
			outline: none;
			border-radius: 5px;
			border: 1px solid #007bff;
			cursor: pointer;
			transition: all .3s ease;
		}
	}
}
.info_box.activeInfo {
	z-index: 5;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%,-50%),scale(1);
}
.quiz_box.activeQuiz {
	z-index: 5;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%,-50%),scale(1);
}
.result_box.activeResult {
	z-index: 5;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%,-50%),scale(1);
}
.buttons {
	button.restart {
		color: $color_4;
		background: rgb(56, 197, 207);
		&:hover {
			background: rgb(56, 79, 207);
		}
	}
	button.quit {
		color: $color_5;
		&:hover {
			background: rgb(56, 79, 207);
		}
	}
}
section {
	.option_list {
		.option {
			background: aliceblue;
			border: 1px solid #84c5fe;
			border-radius: 5px;
			padding: 8px 15px;
			margin-bottom: 15px;
			font-size: 17px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
			transition: all 0.3s ease;
			&:hover {
				color: $color_6;
				background: #cce5ff;
				border-color: $border-color_1;
			}
		}
	}
}
.option_list {
	.option {
		&:last-child {
			margin-bottom: 0px;
		}
		.icon {
			height: 26px;
			width: 26px;
			border: 2px solid transparent;
			border-radius: 50%;
			text-align: center;
			font-size: 13px;
			line-height: 24px;
			pointer-events: none;
		}
		.icon.tick {
			color: $color_7;
			background: #d4edda;
			border-color: $border-color_2;
		}
		.icon.cross {
			color: $color_8;
			background: #f8d7da;
			border-color: $border-color_3;
		}
	}
	.option.correct {
		color: $color_9;
		background: #c3ebcc;
		border-color: $border-color_4;
	}
	.option.incorrect {
		color: $color_10;
		background: #f8d7da;
		border-color: $border-color_4;
	}
	.option.disabled {
		pointer-events: none;
	}
}
footer {
	.total_que {
		span {
			p {
				font-weight: 500;
				padding: 0 5px;
			}
		}
	}
	.next_btn {
		display: none;
		height: 40px;
		padding: 0 13px;
		font-size: 18px;
		font-weight: 400;
		border: none;
		outline: none;
		cursor: pointer;
		color: $color_4;
		background: #007bff;
		border-radius: 5px;
		border: 1px solid #007bff;
		transition: all 0.3s ease;
		&:hover {
			background: #0263ca;
		}
	}
}
.total_que {
	span {
		p {
			&:first-child {
				padding-left: 0;
			}
		}
	}
}
.score_text {
	span {
		p {
			font-weight: 600;
			padding: 0 4px;
		}
	}
}