* {
    margin: 0;
    padding: 0;
}

:root {
    --el-color-white: #ffffff;
    --el-color-black: #000000;
    --el-color-primary: #4caf50;
    --el-color-primary-light-3: #82c785;
    --el-color-primary-light-5: #a6d7a8;
    --el-color-primary-light-7: #c9e7cb;
    --el-color-primary-light-8: #dbefdc;
    --el-color-primary-light-9: #edf7ee;
    --el-color-primary-dark-2: #3d8c40;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #95d475;
    --el-color-success-light-5: #b3e19d;
    --el-color-success-light-7: #d1edc4;
    --el-color-success-light-8: #e1f3d8;
    --el-color-success-light-9: #f0f9eb;
    --el-color-success-dark-2: #529b2e;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-5: #f3d19e;
    --el-color-warning-light-7: #f8e3c5;
    --el-color-warning-light-8: #faecd8;
    --el-color-warning-light-9: #fdf6ec;
    --el-color-warning-dark-2: #b88230;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #f89898;
    --el-color-danger-light-5: #fab6b6;
    --el-color-danger-light-7: #fcd3d3;
    --el-color-danger-light-8: #fde2e2;
    --el-color-danger-light-9: #fef0f0;
    --el-color-danger-dark-2: #c45656;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #f89898;
    --el-color-error-light-5: #fab6b6;
    --el-color-error-light-7: #fcd3d3;
    --el-color-error-light-8: #fde2e2;
    --el-color-error-light-9: #fef0f0;
    --el-color-error-dark-2: #c45656;
    --el-color-info: #909399;
    --el-color-info-light-3: #b1b3b8;
    --el-color-info-light-5: #c8c9cc;
    --el-color-info-light-7: #dedfe0;
    --el-color-info-light-8: #e9e9eb;
    --el-color-info-light-9: #f4f4f5;
    --el-color-info-dark-2: #73767a;
    --el-bg-color: #ffffff;
    --el-bg-color-page: #f2f3f5;
    --el-bg-color-overlay: #ffffff;
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #a8abb2;
    --el-text-color-disabled: #c0c4cc;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-border-color-extra-light: #f2f6fc;
    --el-border-color-dark: #d4d7de;
    --el-border-color-darker: #cdd0d6;
}

a {
    color: var(--el-text-color-regular);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.questioner-btn {
    background-color: var(--el-color-white);
    padding: 0.5rem;
    font-size: 1.25rem;
    box-sizing: border-box;
    border: var(--el-border-color-darker) 2px solid;
    border-bottom: var(--el-border-color-darker) 6px solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    --spr-answer-befor-border-color: var(--el-border-color);
    color: var(--el-text-color-primary);
}

.questioner-btn:hover {
    background-color: var(--el-border-color-extra-light);
}

.questioner-btn:active {
    position: relative;
    border-bottom: var(--el-border-color-darker) 3px solid;
    top: 3px;
}

.questioner-btn+.questioner-btn {
    margin-top: 1rem;
}

.questioner-btn:active+.questioner-btn {
    margin-top: calc(1rem + 3px);
}

.disable .questioner-btn,
.questioner-btn.disable {
    opacity: 0.75;
    color: var(--el-text-color-secondary);
    pointer-events: none;
}

.correct .questioner-btn,
.questioner-btn.correct {
    background-color: var(--el-color-success-light-8);
    border-color: var(--el-color-success-dark-2);
    --spr-answer-befor-border-color: var(--el-color-success-light-5);
}

.correct .questioner-btn:hover,
.questioner-btn.correct:hover {
    background-color: var(--el-color-success-light-7);
}

.wrong .questioner-btn,
.questioner-btn.wrong {
    background-color: var(--el-color-danger-light-8);
    border-color: var(--el-color-danger-dark-2);
    --spr-answer-befor-border-color: var(--el-color-danger-light-5);
}

.wrong .questioner-btn:hover,
.questioner-btn.wrong:hover {
    background-color: var(--el-color-danger-light-7);
}

.questioner-btn.correct.sel {
    animation: questioner-btn-sel-correct .3s ease-out 0s 1;
}

@keyframes questioner-btn-sel-correct {
    0% {
        box-shadow: 0 0 0 0 var(--el-color-success-light-3);
    }
    100% {
        box-shadow: 0 0 0 1rem transparent;
    }
}



#questioner {
    padding: 5rem 1rem 220px 1rem;
    text-align: center;
}

#questioner .game-title {
    font-size: 2rem;
    color: var(--el-text-color-primary);
}

#questioner .game-subtitle {
    font-size: 1.5rem;
    color: var(--el-text-color-primary);
}

#questioner .game-title,
#questioner .game-subtitle,
#questioner .title,
#questioner .type,
#questioner .dec,
#questioner .game-dec {
    text-align: center;
}

#questioner .game-dec {
    color: var(--el-text-color-regular);
    margin-top: 2rem;
}

#questioner .title-menu {
    margin: 0 auto;
    width: min(100%, 500px);
    padding: 5rem 1rem;
    text-align: center;
    box-sizing: border-box;
}

#questioner .title-menu-item:hover {
    background-color: var(--el-border-color-extra-light);
}

#questioner .title-menu-item:active {
    position: relative;
    border-bottom: var(--el-border-color-darker) 3px solid;
    top: 3px;
}

#questioner .progress {
    background-color: var(--el-color-info-light-9);
    height: 0.75rem;
    width: min(1000px, 100%);
    margin: 0 auto 1rem;
}

#questioner .progress-content {
    --color-progress: var(--el-color-success);
    --color-progress-light: var(--el-color-success-light-3);
    background-color: var(--color-progress-light);
    height: 0.75rem;
    transition: width .3s, background-color .3s, box-shadow .3s;
    /* box-sizing: border-box;
    border: var(--el-color-success) 4px solid;
    border-width: 0.2rem 1rem 0.35rem 1rem;  */
    box-shadow: inset 0 -0.075rem 0 0.25rem var(--color-progress);
    position: relative;
    overflow: hidden;
    /* background-image: linear-gradient(to right, var(--color-progress) 0.75rem, transparent 0.75rem), linear-gradient(to left, var(--color-progress) 0.75rem, transparent 0.75rem); */
}

#questioner .progress-content::before,
#questioner .progress-content::after {
    content: "";
    position: absolute;
    background-color: var(--color-progress);
    height: 0.75rem;
    width: 0.75rem;
    transition: background-color .3s;
}

#questioner .progress-content::before {
    left: 0;
    top: 0;
}

#questioner .progress-content::after {
    right: 0;
    top: 0;
}

#questioner .progress-content.combo {
    --color-progress: var(--el-color-warning);
    --color-progress-light: var(--el-color-warning-light-3);
}

#questioner .title {
    font-size: 1.35rem;
    color: var(--el-text-color-primary);
}

#questioner .type {
    background-color: var(--el-color-info-light-8);
    padding: 0.125rem 0.5rem;
    display: inline-block;
    margin: 0.5rem;
    color: var(--el-text-color-regular);
}

#questioner .dec {
    color: var(--el-text-color-regular);
}

#questioner .answers {
    margin: 0 auto;
    width: min(100%, 500px);
    padding: 2rem 1rem;
    text-align: center;
    box-sizing: border-box;
}

#questioner .answer {
    justify-content: space-between;
}

#questioner .answer-befor {
    min-width: 1.75rem;
    box-sizing: border-box;
    border: var(--spr-answer-befor-border-color) 2px solid;
    position: absolute;
    height: 1.75rem;
    font-size: 1.15rem;
}

#questioner .answer-content {
    flex: 1;
    padding: 0 2rem;
}

#questioner .footer {
    background-color: var(--el-color-white);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    min-height: 200px;
    box-sizing: border-box;
    border-top: var(--el-border-color-darker) 2px solid;
    color: var(--el-text-color-regular);
}

#questioner .footer-page {
    margin: 0 auto;
    width: min(1000px, 100vw);
    display: flex;
    height: 198px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1rem 1rem 2rem 1rem;
}

#questioner .footer-left {
    text-align: left;
}

#questioner .footer-right {
    text-align: right;
}

#questioner .footer-left-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#questioner .footer.correct {
    background-color: var(--el-color-success-light-9);
    border-color: var(--el-color-success-dark-2);
}

#questioner .footer.correct .footer-left,
#questioner .footer.correct a {
    color: var(--el-color-success-dark-2);
}

#questioner .footer.wrong {
    background-color: var(--el-color-danger-light-9);
    border-color: var(--el-color-danger-dark-2);
}

#questioner .footer.wrong .footer-left,
#questioner .footer.wrong a  {
    color: var(--el-color-danger-dark-2);
}

#questioner .questioner-next {
    width: 200px;
    align-items: center;
    justify-content: center;
}

#questioner .questioner-action {
    text-align: center;
    padding-top: 1rem;
}

#questioner .questioner-action .questioner-issues {
    margin-top: 0.5rem;
    opacity: 0.5;
    transition: opacity .3s;
}

#questioner .questioner-action .questioner-issues:hover {
    opacity: 1;
}

#questioner .questioner-btn:active+.questioner-issues {
    position: relative;
    margin-top: calc(0.5rem + 3px);
}

@media only screen and (max-width: 567px) {
    #questioner {
        padding: 3rem 1rem 200px 1rem;
    }

    #questioner .footer {
        min-height: 180px;
    }

    #questioner .footer-page {
        flex-direction: column;
        padding: 1rem 1rem 2rem 1rem;
        height: 178px;
    }

    #questioner .footer-left {
        text-align: center;
        width: 100%;
    }

    #questioner .footer-right {
        text-align: center;
    }
}