/* MODAL COUNTDOWN */


.counter {
    font-size: 70px;
    text-align: center;
    font-weight: 700;
    color: #FF9D00;
}




.modal-content.countdown .content{
    padding: 50px;
   
    /* box-shadow: 0 0 10px rgba(255,157,0,1) */
}

.modal-content.countdown {
    /* box-shadow: 0 0 10px rgba(255,157,0,1); */
    animation: boxShadowPulse 1.1s infinite ease-in-out;
    -webkit-animation: boxShadowPulse 1.1s infinite ease-in-out;
    border-radius: 24px;
}

/* Keyframes for scaling up and down */

/* Apply the animations */
.scale-up {animation: scaleUp 0.5s forwards;}
.scale-down {animation: scaleDown 0.5s forwards;}


.gameplay h1.game_cat {
    font-family: "Nanotech LLC";
    text-align: left;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin: 25px auto 0 0;
}


.flex-row.gameplay_steps {
    justify-content: center;
    margin: 20px auto;
}

.gameplay_steps .game_step {
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 5px;
    border-radius: 2px;
}

.gameplay_steps .game_step.centered {
    margin: 0 10px;
}

.gameplay_steps .wrong {background-color: #E74A4A;}
.gameplay_steps .correct {background-color: #00BA01;}

.flex-row.quest_count {
    justify-content: space-between;
    align-items: center;
}

.quest_count p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.magic_question .quest_count p {
    font-size: 16px;
    color: #3EB3F8;
}

.time_counter_box {
    padding: 3px 5px;
    border-radius: 7px;
    background-color: #ffffff;
    width: 100%;
    max-width: 70px;
}

.time_counter_box.ending {
    background-color: #ff2c2c;
}

.time_counter.ending {
    color: #000000;
}

.quest_img {
    border: 5px solid rgba(0, 0, 0, 0.4);
    border-radius: 30px;
}

.magic_question .quest_img {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    box-shadow: 0px 0px 10px 0px rgba(43,192,249,1);
    border: none;
}


.time_counter {
    font-size: 14px;
    font-weight: 700;
}

/* .magic_question .time_counter {
    color: #e74a4a;
} */

.time_counter_box img {max-width: 16px;}
.time_counter_box .flex-row {justify-content: space-between;}

section.questions {
    margin: 20px auto 40px auto;
}

.quest_title {
    font-size: 24px;
    font-weight: 600;
    margin: 20px auto 10px auto;
}

.question_btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    width: 100%;
    min-height: 65px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 16px;
    font-family: 'Montserrat';
    margin: 20px auto 0 auto;
    transition: 0.3s;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}

@supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */ 
    .question_btn:hover {
        border: 1px solid #FF9D00;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
        box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    }

    .magic_question .question_btn:hover {
        border: 1px solid #00b3f8;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
        box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    }
}



.question_btn.selected {
    border: 1px solid #FF9D00;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
    box-shadow: 0px 0px 10px 0px rgba(255,157,0,1);
}


.magic_question .question_btn.selected {
    border: 1px solid #00b3f8;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
    box-shadow: 0px 0px 10px 0px rgba(0,179,248,1);
}

.question_btn span {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.question_btn p {
    font-size: 16px;
    font-weight: 600;
}

.question_btn.right_answer, 
.magic_question .question_btn.right_answer {
    background-color: #00ba01;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    box-shadow: 0px 0px 10px 0px rgba(0,186,1,1);
    border: 1px solid #00ba01;
    background-image: url('../images/game/correct_icon.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}

.question_btn.wrong_answer,
.magic_question .question_btn.wrong_answer {
    background-color: #e74a4a;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    box-shadow: 0px 0px 10px 0px rgba(231,74,74,1);
    border: 1px solid #e74a4a;
    background-image: url('../images/game/wront_icon.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 96% 50%;
}



section.answer_msg {margin-bottom: 40px;}
.answer_msg .flex-row {
    justify-content: space-between;
    align-items: center;
}

.answer_msg .answer_points img {max-width: 25px;}

.answer_msg p {margin-right: 10px;}
.answer_msg .answer_points {margin-left: 10px;}

.answer_points p {
    color: #FF9D00;
    font-weight: 700;
    text-align: right;
}

.answer_msg.right_answer .answer_txt span {
    color: #00BA01;
    font-weight: 700;
}

.answer_msg.wrong_answer .answer_txt span {
    color: #E74A4A;
    font-weight: 700;
}

.answer_msg .outline_fancy_btn {
    margin-top: 30px;
}

main.magic_question {
    background: 
    linear-gradient(to bottom, #0B2B53 0%, rgba(11, 43, 83, 0.7) 15%, rgba(11, 43, 83, 0) 50%),
    linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
}

.quest_img_container {
    position: relative;
}

.mq_badge {
    justify-content: center;
    align-items: center;
    background-color: #00B3F8;
    max-width: 165px;
    height: 30px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    box-shadow: 0px 2px 10px 0px rgba(43, 192, 249, 1);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 5px;
}

.mq_badge .mq_book {
    max-width: 40px;
    margin-left: -10px;
    margin-top: -5px;
}

.mq_badge .mq_questionmark {
    max-width: 16px;
}

.mq_badge p {
    margin: 0 5px;
    font-size: 14px;
}

.magic_question .quest_title {
    margin: 30px auto 10px auto;
}

.magic_question .question_btn span {
    background-color: #00B3F8;
}


.double_points .mq_badge {
    max-width: 225px;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    box-shadow: 0px 2px 10px 0px rgba(247, 158, 24, 1);
    height: auto;
   
    background: radial-gradient(45.33% 46.43% at 41.69% 50%, #FF4001 0%, rgba(255, 64, 1, 0) 100%), radial-gradient(28.41% 117.96% at 7.72% 28.75%, #FFFDA6 0%, rgba(255, 255, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(37.39% 69.19% at 107.79% 0%, #FF7500 0%, rgba(255, 66, 0, 0) 100%), radial-gradient(54.38% 89.75% at 83.46% 89.75%, #FFF926 0%, rgba(255, 69, 0, 0.6) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FF4001;
    border: 0.5px solid #FFFED6;
    box-shadow: inset 0px 0px 6.24px #FEA000, inset 0px 0px 9.36px #FFFD54;

}

.double_points .quest_img {
    box-shadow: 0px 0px 10px 0px #F79E18;
    -webkit-box-shadow: 0px 0px 10px 0px #F79E18;
    -moz-box-shadow: 0px 0px 10px 0px #F79E18;
    border: none;
}

.double_points .mq_badge p {
    text-shadow: 1px 1px 2px #000000;
    -webkit-text-shadow: 1px 1px 2px #000000;
}

.double_points .mq_badge .mq_book {max-width: 50px;}

.double_points .question_btn span {
    background-color: #F79E18;
}

main.double_points {
    background: 
    linear-gradient(to bottom, rgba(247, 158, 24, .5) 0%, rgba(247, 158, 24, 0.3) 15%, rgba(247, 158, 24, 0) 50%), 
    linear-gradient(158.52deg, #0C092A 12.82%, #2E0124 84.59%);
}

.double_points .quest_title {
    margin: 30px auto 10px auto;
}

/* .double_points .question_btn:hover,
.double_points .question_btn:focus {
    border: 1px solid #F79E18;
    -webkit-box-shadow: 0px 0px 10px 0px #F79E18;
    -moz-box-shadow: 0px 0px 10px 0px #F79E18;
    box-shadow: 0px 0px 10px 0px #F79E18;
} */

/* Ellipse 396 */







@media only screen and (max-width: 500px) {

    .gameplay h1.game_cat {margin: 10px auto 0 0;}
    .flex-row.gameplay_steps {margin: 10px auto 20px auto;}
    .quest_title {margin: 15px auto 20px auto; font-size: 20px;}
    .question_btn {
        min-height: 50px;
        margin: 10px auto 0 auto;
    }
    section.questions {margin: 15px auto 40px auto;}

}

@media only screen and (max-width: 400px) {
    .answer_msg .answer_txt span {
        display: block;
    }
}



@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleDown {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}


@keyframes boxShadowPulse {
    0% {box-shadow: 0 0 10px rgba(255,157,0,1);}
    10% {box-shadow: 0 0 20px rgba(255,157,0,1);}
    20% {box-shadow: 0 0 30px rgba(255,157,0,1);}
    30% {box-shadow: 0 0 40px rgba(255,157,0,1);}
    40% {box-shadow: 0 0 50px rgba(255,157,0,1);}
    50% {box-shadow: 0 0 60px rgba(255,157,0,1);}
    60% {box-shadow: 0 0 50px rgba(255,157,0,1);}
    70% {box-shadow: 0 0 40px rgba(255,157,0,1);}
    80% {box-shadow: 0 0 30px rgba(255,157,0,1);}
    90% {box-shadow: 0 0 20px rgba(255,157,0,1);}
    100% {box-shadow: 0 0 10px rgba(255,157,0,1);}
}