*{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
}
body{
	background: #01315c;
}
header{
	font-size:30px;
	color:#fff;
	font-weight: 600;
	width: 90%;
	max-width: 740px;
	margin: 20px auto;
	font-family: 'Figtree', sans-serif;
}
header h2{
	font-size: 24px;
	font-weight: 600;
}

.app-head{
	display: flex;
	justify-content: space-between;
}
.title{
	width: 100%;
	max-width: 740px;
	margin: 60px auto;
	text-align: center;
	color: #fff;
}

.title a {
	color: #60a9e8dd; 
	text-decoration: none; 
}

.app{
	width: 90%;
	max-width: 740px;
	margin: 0px auto;
	background: #fff;
	border-radius: 10px;
	padding: 30px;
}

.app h1{
	font-size: 25px;
	color: #01315c;
	font-weight: 600;
	border-bottom: 1px solid #333;
	padding-bottom: 30px;
	font-family: 'Figtree', sans-serif;
}
/* .quiz{
	padding: 20px 0;
} */

.quiz h2{
	font-size: 25px;
	color:#01315c;
	font-weight: 600;
	line-height: 30px;
	padding-bottom: 10px;
}

.btn{
	background: #fff;
	color: #333;
	font-weight: 500;
	width: 100%;
	border: 1px solid #333;
	padding: 10px;
	margin: 10px 0;
	text-align: left;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
}

.btn:hover:not([disabled]){
	background: #333;
	color: #fff;
}
.btn:disabled{
	cursor: no-drop;
}

#next-btn{
	font-weight: 500;
	background: #01315c;
	color: #fff;
	width: 100%;
	border: 0;
	padding: 10px;
	margin: 20px 0 0 auto;
	border-radius: 4px;
	cursor: pointer;
	display: none;
}
.nxt-btn{
	cursor: no-drop!important;
	background:#01325c8f!important;
}
.correct{
	background: #0f8442;
	border: 1px solid #0f8442;
	color: #fff;
}

.incorrect{
	background: #d63737;
	border: 1px solid #d63737;
	color: #fff;
}

#result{
	line-height: 25px;
}

@media screen and (max-width: 764px){
	.quiz h2{
		font-size: 23px;
		font-weight: 600;
		line-height: 25px;
	}
	.app{
		padding: 20px;
	}
}

.timer {
	font-size: 20px;
	font-weight: 600;
	font-family: 'Figtree', sans-serif;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background: #fff;
	width: 90%;
	max-width: 450px;
	margin: 15% auto;
	border-radius: 4px;
	padding:20px;
}

/* The Close Button */
.continue {
  font-weight: 500;
	background: #01315c;
	color: #fff;
	width: 150px;
	border: 0;
	padding: 10px;
	margin: 20px 0 0 auto;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
}

.continue:hover,
.continue:focus {
  background:#01325cd9;
  text-decoration: none;
  cursor: pointer;
}

.close {
  font-weight: 500;
	background: #a01a27;
	color: #fff;
	width: 150px;
	border: 0;
	padding: 10px;
	margin: 20px 0 0 auto;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
}

.close:hover,
.close:focus {
  background:#a01a27c8;
  text-decoration: none;
  cursor: pointer;
}