/* =========================
   LANGUAGE PAGE HEADER
========================= */

.quiz-header{
    text-align:center;
    margin-bottom:28px;
}

.quiz-header h1{
    font-size:clamp(2.2rem, 5vw, 3rem);
    margin-bottom:10px;
}

.quiz-header p{
    color:#cbd5e1;
    line-height:1.5;
}

/* =========================
   LANGUAGE QUESTION
========================= */

.language-question{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:150px;
    padding:32px;

    color:white;
    background:#0f172a;

    border:1px solid #334155;
    border-radius:18px;

    font-size:clamp(1.6rem, 4vw, 2.5rem);
    font-weight:bold;
    line-height:1.4;
    text-align:center;
    overflow-wrap:anywhere;
}

/* =========================
   ANSWERS
========================= */

#answers{
    margin-top:20px;
}

/* =========================
   LANGUAGE INFORMATION
========================= */

.language-info{
    min-height:95px;

    margin-top:22px;
    padding:20px;

    color:#cbd5e1;
    background:#0f172a;

    border:1px solid rgba(148,163,184,.08);
    border-radius:15px;

    line-height:1.6;
}

.info-header{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:12px;
}

.info-flag{
    width:58px;
    max-height:40px;

    object-fit:cover;

    border-radius:6px;
}

.language-info p + p{
    margin-top:8px;
}

/* =========================
   QUIZ BUTTONS
========================= */

#next{
    display:block;
    margin:24px auto 0;
}

#restart{
    display:block;
    margin:22px auto 0;
}

/* =========================
   QUIZ CARD
========================= */

.quiz-card{
    padding:32px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .quiz-card{
        padding:22px;
    }

    .language-question{
        min-height:120px;
        padding:24px 18px;
        font-size:clamp(1.35rem, 7vw, 2rem);
    }

    .language-info{
        min-height:85px;
    }
}