:root {
    --back: rgb(231, 233, 235);
    --card: rgb(225, 227, 229); 
    --answ: rgb(233, 236, 238);
    --sele: rgb(156, 225, 191);
}


:root {
    --back: rgb(131, 133, 135);
    --card: rgb(131, 133, 135); 
    --answ: rgb(133, 136, 138);
    --sele: rgb(116, 185, 151);
}

:root {
    --back: rgb(31, 33, 35);
    --card: rgb(31, 33, 35); 
    --answ: rgb(33, 36, 38);
    --sele: rgb(16, 85, 51);
    --font: rgb(161, 163, 165);
}

* {
    box-sizing: border-box; 
    background-color: var(--back);
    color: var(--font);
 }
 
 
.container {
    display: flex;
    flex-direction: column;
    margin: 0.2em ;
    background-color: var(--back);
}


.card {
    display: flex;
    flex-direction: column;
    align-items : stretch;
    font-size: 20px;
    margin: 0.5em;
    background-color:  var(--card);
}

.ans_contener {
    display: flex;
    flex-direction: row;
    align-items : flex-start;
    background-color:  var(--answ);
}

.ans {
    font-size: 20px;
    margin: 5px;
}

.chk {
    align-self: center;
}

.ans_num {
    font-size: 20px;
    margin: 5px;
    background-color: var(--back);
}


.que {
    font-size: 21px;
    margin: 5px;
}

.ans_right {
    background-color: var(--sele);
}

.card_block {
    margin: 10px;
}

.btn_contener {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    background-color: var(--back);
}

.inp {
    font-size: 30px;
    margin: 5px;
    padding: 0.1em;
    letter-spacing: 0.2em;
    max-width: 100%;
    height: 2em;
    background-color: var(--card);
    color: var(--font);
}

.btn {
    font-size: 20px;
    margin: 5px;
    height: 3em;
    width: 4em;
    background-color: var(--card);
    color: var(--font);
}