#gain,
#question {
    background:var(--Secondary);
    width: 45%;
    height: 100%;
    display: flex;
    box-shadow: 5px 3px 2px #000;
    border-radius: 80%/10% 0;
    /*! padding: 5; */
}
#question {
    color: #FFF;
    flex-direction: column-reverse;
    height: 150px;
    width: 85%;
    margin: 17px;
    position: relative;
}
#question.anime{
    animation: questionAnime .7s;
}
.questionElement p {
    background: #99E;
    padding: 5px;
    margin: 3px;
}

.good {
    border: 3px solid #5F5;
    transform: scale(1.5);
}

.bad {
    border: 2px solid #F55;
    background: #300;
    color: #FFF;
    transform: scale(2);
}

#gain ul {
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: space-evenly;


}

.fullfil {
    color: #5F5;
    background: #353;
    box-shadow: 0 0 5px 2px #fff, 0 0 7px 5px #0F0, 0 0 9px 9px #F0F;
}

.default {
    color: #999;
    background: #333;
}

#gain ul li {

    width: 21%;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 19px;
    height: 50%;
    clip-path: polygon(29% 21%, 74% 22%, 100% 50%, 74% 81%, 24% 80%, 0% 50%);
    font-family: "Beam";
}

#gain ul li span {
    font-family: "Beam";
}

#gain {
    height: 160px;
    flex-direction: column;
    padding: 8px;
    margin-top: 15px;
}
.questionElement ol li {
    list-style-type: upper-alpha;
    width: 40%;
    background: var(--Tertiary);
    margin: 5px;
    opacity: 0;
    transition: .7s;
}

.questionElement.current ol li {
    opacity: 1;
    counter-increment: li
}

.questionElement.current ol li::before {
    content: counter(li, upper-alpha) ". ";
    ;
    color: #FF0;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.questionElement ol li:hover,
.questionElement ol li.activ {
    background: #FF0;
    color: #000;
    cursor: pointer;
}
.questionElement section{
    background: var(--Tertiary);
    color: #FFF;
    width: 25%;
    position: absolute;
    bottom: -65px;
}
#indexQuestion {
    color: #888;
    font-size: 15pt;
}
#prgs_container {
    width: 95%;
    height: 80px;
    background: transparent;
    align-self: center;
    border: 4px solid #33F;
    border-radius: 100%/20%;
    position: relative;
    box-shadow: 0 0 5px 2px #fff, 0 0 7px 5px #f0f, 0 0 9px 9px #33F;
}

#prgs_current {
    position: absolute;
    background:  var(--Tertiary);
    height: 100%;
}