*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

body{
    background:#007bff;
}
.start_btn,
.info_box,
.quiz_box,
.result_box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0px 4px 8px 0 rgba(0,0,0,.2),
               0px 6px 20px 0   rgba(0,0,0,.19);
    transition:.5s cubic-bezier(0.12, 1.97, 0.79, 0.96);
}

.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult{
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    transform:translate(-50%,-50%) scale(1);
}

.option_list .option.correct{
    color:#155724;
    background:#d4edda;
    border-color:#c3e6cb;
}

.option_list .option.incorrect{
    color:#721c24;
    background:#f8d7da;
    border-color:#f5c6cb;
}

.option_list .option.disabled{
    pointer-events: none;
}
.start_btn button{
    font-size:25px;
    font-weight:500;
    color:#007bff;
    background: #fff;
    outline:none;
    border:none;
    border-radius:5px;
    padding:15px 30px;
    cursor:pointer;
}

.info_box{
    width:400px;
    background:#fff;
    border-radius:5px;
    opacity: 0;
    pointer-events: none;
    transform:translate(-50%,-50%) scale(0.5);
    
}

.info_box .info_title{
    height:60px;
    width:100%;
    border-bottom:1px solid lightgrey;
    display:flex;
    align-items:center;
    padding:0 25px;
    font-size:20px;
    font-weight:600;
    pointer-events: none;
}

.info_box .info_list{
    padding:15px 25px;
}

.info_box .info_list .info{
    margin:5px 0px;
    font-size:16px;
    pointer-events: none;
}

.info_box .info_list .info span{
    font-weight:600;
    color:#007bff;
}

.info_box .buttons{
    height:60px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 25px;
    border-top:1px solid lightgrey;
}

.info_box .buttons button{
    margin:0 5px;
    height:40px;
    width:100px;
    outline:none;
    border:1px solid transparent;
    border-radius:5px;
    color:#fff;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    transition:all .3s ease;  
}

.buttons button.restart{
    color:#ffffff;
    border-color:#007bff;
    background:#007bff;
}

.buttons button.restart:hover{
    background:#0263ca;
}

.buttons button.quit{
    color:#007bff;
    border-color:#007bff;
}

.buttons button.quit:hover{
    color:#ffffff;
    background:#007bff;
}

.quiz_box{
    width:400px;
    background:#fff;
    border-radius:5px;
    opacity: 0;
    pointer-events: none;
    transform:translate(-50%,-50%) scale(0.8);
}


.quiz_box 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:0px 3px 5px 1px rgba(0,0,0,.1);
}

.quiz_box header .time_line{
    position:absolute;
    bottom: 0;
    left:0;
    height:3px;
    background:#eb213c;
    
}

.time_line.activeTimeLine{
    width:100%;
}

.quiz_box header .title{
    font-size:20px;
    font-weight:600;
}

.quiz_box header .timer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:145px;
    height:45px;
    background:#cce5ff;
    border:1px solid #b8daff;
    border-radius:5px;
    padding:0 8px;
}

.quiz_box header .timer .time_text{
    font-weight:400;
    font-size:17px;
    user-select:none;
}

.quiz_box header .timer .timer_sec{
    font-size:18px;
    font-weight:500;
    background:#343a40;
    height:30px;
    width:40px;
    color:#fff;
    text-align:center;
    line-height:30px;
    border-radius:5px;
    border:1px solid #343a40;
    user-select:none;
}

.quiz_box section{
    padding:25px 30px 20px 30px;
}

.quiz_box section .que_text{
    font-size:25px;
    font-weight:600;
}

.quiz_box section .option_list{
    padding-top:20px;
    display:block;
}

section .option_list .option{
    background:aliceblue;
    border:1px solid #84c5fe;
    border-radius:5px;
    padding:8px 15px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}

section .option_list .option:hover{
    color:#007bff;
    background:#cce5ff;
    border-color:#b8daff;
}

.option_list .option:last-child{
    margin-bottom:0px;
}

.option_list .option .icon{
    height: 26px;
    width:26px;
    border:2px solid transparent;
    border-radius:50%;
    text-align:center;
    font-size:13px;
    line-height:23px;
    pointer-events: none;
}

.option_list .option .icon.tick{
    color:#23903c;
    border-color:#23903c;
    background:#d4edda;
}

.option_list .option .icon.cross{
    color:#a42834;
    border-color:#a42834;
    background:#d4edda;
}

.quiz_box footer{
    height:60px;
    width:100%;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.quiz_box footer .total_que span{
    display:flex;
    user-select:none;
}

footer .total_que span p{
    font-weight:500;
    padding:0 5px;
}

.total_que span p:first-child{
    padding-left:0px;
}

footer .next_btn{
    height:40px;
    display:none;
    padding:0 13px;
    font-size:18px;
    font-weight:400;
    border:none;
    outline:none;
    color:#fff;
    background:#007bff;
    border-radius:5px;
    border:1px solid #007bff;
    cursor:pointer;
    transition:all .3s ease;
}

footer .next_btn:hover{
    background:#0263ca; 
}

.result_box{
    background:#fff;
    width:400px;
    padding:25px 30px;
    border-radius:5px;
    text-align:center;
    display:flex;
    align-items:center;
    flex-direction:column;
    justify-content:space-between;
    opacity: 0;
    pointer-events: none;
    transform:translate(-50%,-50%) scale(0.9);
}

.result_box .icon{
    font-size: 100px;
    color:#007bff;
    margin-bottom:10px;
}

.result_box .complete_text{
    font-size:20px;
    font-weight:500;
}

.result_box .score_text span{
    display:flex;
    margin:10px 0;
    font-size:18px;
    font-weight:500;
}

.result_box span p{
    font-weight:500;
    padding:0 4px;
}

.result_box .buttons{
    display:flex;
    margin:20px 0;
}

.result_box .buttons button{
    margin:0 10px;
    height:40px;
    padding:0 20px;
    border:none;
    outline:none;
    font-size:18px;
    font-weight:500;
    border-radius:5px;
    border:1px solid #007bff;
    cursor:pointer;
    transition: all .3s ease;
}