body{

    background:
    linear-gradient(
        to right,
        #06152d,
        #0a1d42
    );

    color:white;

    font-family:'Poppins',sans-serif;

}

/* TOP */

.review-top{

    padding:
    120px 0 60px;

}

.review-top-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.review-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:
    rgba(56,182,255,0.12);

    color:#38b6ff;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.review-top h1{

    font-size:48px;

    margin-bottom:16px;

}

.review-top p{

    color:#c6d3f1;

    line-height:1.8;

}

/* DASHBOARD BUTTON */

.dashboard-btn{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px 24px;

    border-radius:16px;

    background:
    linear-gradient(
        145deg,
        #0077ff,
        #38b6ff
    );

    color:white;

    text-decoration:none;

    font-weight:600;

}

/* SUMMARY */

.summary-section{

    margin-bottom:50px;

}

.summary-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

}

.summary-card{

    padding:35px;

    border-radius:24px;

    text-align:center;

}

.summary-card h3{

    font-size:20px;

    margin-bottom:18px;

}

.summary-card p{

    font-size:42px;

    font-weight:700;

}

/* COLORS */

.correct-card{

    background:
    rgba(0,255,136,0.08);

    border:
    1px solid rgba(0,255,136,0.2);

}

.correct-card p{

    color:#00ff88;

}

.wrong-card{

    background:
    rgba(255,82,82,0.08);

    border:
    1px solid rgba(255,82,82,0.2);

}

.wrong-card p{

    color:#ff5252;

}

.skipped-card{

    background:
    rgba(255,193,7,0.08);

    border:
    1px solid rgba(255,193,7,0.2);

}

.skipped-card p{

    color:#ffc107;

}

/* REVIEW QUESTIONS */

#reviewContainer{

    display:flex;

    flex-direction:column;

    gap:30px;

    padding-bottom:80px;

}

/* QUESTION CARD */

.review-card{

    background:
    rgba(20,35,75,0.9);

    border-radius:30px;

    padding:35px;

}

/* TOP */

.review-question-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    gap:20px;

}

/* NUMBER */

.review-question-number{

    font-size:15px;

    font-weight:600;

    color:#38b6ff;

}

/* STATUS */

.review-status{

    padding:10px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

.status-correct{

    background:
    rgba(0,255,136,0.12);

    color:#00ff88;

}

.status-wrong{

    background:
    rgba(255,82,82,0.12);

    color:#ff5252;

}

.status-skipped{

    background:
    rgba(255,193,7,0.12);

    color:#ffc107;

}

/* QUESTION */

.review-question{

    font-size:28px;

    line-height:1.8;

    margin-bottom:35px;

}

/* OPTIONS */

.review-options{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* OPTION */

.review-option{

    padding:20px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.04);

    border:
    2px solid transparent;

}

/* CORRECT */

.correct-answer{

    border-color:#00ff88;

    background:
    rgba(0,255,136,0.08);

}

/* WRONG */

.wrong-answer{

    border-color:#ff5252;

    background:
    rgba(255,82,82,0.08);

}

/* LABEL */

.answer-label{

    display:inline-block;

    margin-top:10px;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.correct-label{

    background:
    rgba(0,255,136,0.14);

    color:#00ff88;

}

.wrong-label{

    background:
    rgba(255,82,82,0.14);

    color:#ff5252;

}

/* EXPLANATION */

.explanation-box{

    margin-top:30px;

    padding:24px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.04);

}

.explanation-box h3{

    margin-bottom:14px;

    color:#38b6ff;

}

.explanation-box p{

    color:#d2def7;

    line-height:1.9;

}

/* MOBILE */

@media(max-width:768px){

    .review-top{

        padding:
        100px 0 50px;

    }

    .review-top-content{

        flex-direction:column;

        align-items:flex-start;

    }

    .review-top h1{

        font-size:36px;

    }

    .review-question{

        font-size:22px;

    }

    .review-card{

        padding:25px;

    }

}