:root{
    --header-margin-top: var(--gap-l);

    --progress-bar-max-width: 70ch;
    --progress-bar-height:0.5rem;
    --clr-progress-bar-bg: var(--progress-bar-grey);
    --clr-progress-bar: var(--clr-accent-primary);

    --answers-max-width: 70rem;
    --answers-grid-columns: 2;
    --answer-clr-border: var(--clr-accent-primary);

    --buttonGroup-margin-block: var(--gap-xl);
}

#quizPageHeader{ margin-top: var(--header-margin-top); }

#progressBarContainer{
    background-color: var(--clr-progress-bar-bg);
    max-width: var(--progress-bar-max-width);
}

#progressBar{
    background-color: var(--clr-progress-bar);
    height: var(--progress-bar-height);
    /* width set in quiz.js */
}

#questions{
}

.question{
    padding-block:calc(var(--gap-big)/2);
    gap:var(--gap-small);
}

#answers{
    grid-template-columns: repeat(var(--answers-grid-columns), 1fr);
    max-width:var(--answers-max-width);
}

.answer{
    background-color:var(--clr-bg-primary);
    border: 5px solid transparent;
    cursor: pointer;
    transition: border 0.2s ease, background-color 0.2s ease;
}
.answer.selected {
    border-color: var(--answer-clr-border);
}

#buttonGroup{
    margin-block: var(--buttonGroup-margin-block);
}