/* ----------------------------------
MEDIA QUERIES
---------------------------------- */

.show_on_HD {
    display: block;
}

.show_on_4K, .show_on_MOB {
    display: none;
}


/* FOR 4K -------------------------- */
@media only screen and (min-width: 3500px) {

    .show_on_4K {
        display: block;
    }
    .show_on_HD, .show_on_MOB {
        display: none;
    }
    body {
        font-size: 24px;
    }
    #bg_1 {
        background: url("../images/BG_4K.jpg") center center / cover no-repeat; 
    }
    
}


/* Thinner than the wrapper --------------------------- */
@media only screen and (max-width: 1360px) {    /* 1400px */

    .screen .wrapper, .screen.fullheight .wrapper {
        width: 96vw;
    }
    .box {
        padding: 50px;
    }

    #main_cover {
        width: 96vw;
        left: calc(50% - 48vw);
    }

}


/* Tutorial callout */
@media only screen and (max-width: 1300px) and (min-width:769px)  {
    #tutorial_powerup_time, #tutorial_powerup_50 {
        left: auto;
        right: 0;
    }
        
    #tutorial_powerup_time .notch {
        left: 64.7%;
    }
        
    #tutorial_powerup_50 .notch {
        left: 87%;
    }
     
}


/* Tablet Large -------------------------- */
@media only screen and (max-width: 1024px) {


    h1, h2, h3, h4, p, ul, li, span {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    .show_on_MOB {
        display: block;
    }

    .show_on_HD, .show_on_4K {
        display: none;
    }
    
    /* Default styles */

    .button_wrapper .button {
        margin: 10px 20px;
    }

    .full_screen .cover .wrapper {
        max-width: 90vw;
        padding: 20px 0;
    }

    /* Prelim screens */

    .countdown_num {
        font-size: 0.5em;
    }

    #instructions .hint_wrapper {
        display: inline-block;
    }

    #instructions .powerup_instructions .text {
        padding-right: 0;
    }

    #instructions .chart_wrapper p {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }




}


/* Tablet Small -------------------------- */
@media only screen and (max-width: 768px) {

    #quiz {
        font-size: 15px;
    }

    #bg_1 {
        background: url("../images/BG_MOB.jpg") center center / cover no-repeat; 
    }

    .screen .wrapper, .screen.fullheight .wrapper {
        width: calc(100% - 26px);
    }
    #main_cover {
        width: calc(100% - 26px);
        left: 13px;
    }

    .box {
        padding: 2em 2em;
    }
    
    .screen .wrapper {
        width: 100%;
        margin-top: 0em;
        margin-bottom: 0em;
    }
    
    /* Quiz UI */

    #quiz_top_bar {
        padding-top: 0px;
        margin-top: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        padding-bottom: 15px;
    }
    #quiz_top_bar .wrapper {
        background: var(--main-color);
        padding-bottom: 10px;
        padding-top: 20px;
    }
    #header_wrapper {
        grid-template-columns: 100%;
        margin-top: 0;
    }
    #header_text {
        display: none;
    }
    #powerups_wrapper {
        order: 1;
        justify-content: center;
    }

    #powerups_wrapper .powerup {
        margin: 0 0.8125em;
    }
    #timer_wrapper {
        order: 2;
    }

    #tutorial_powerup_time {
        left: calc(50% - 12.6125em);
    }

    .question_wrapper {
        margin: 0.1em auto 3.75em;
    }
    
    .answer_text_wrapper {
        grid-template-columns: 100%;
        grid-auto-rows: auto;
        grid-gap: 0.8em;
    }
    .level_results .score_circle_wrapper {
        width: 70vw;
        height: 70vw;
    }
    .level_results .score_circle_wrapper .text p {
        font-size: 25vw;
    }
    #game_results .info_wrapper {
        flex-wrap: wrap;
    }
    #game_results .info_column {
        flex-basis: 100%;
        max-width: unset;
    }
}


/* Mobile -------------------------- */
@media only screen and (max-width: 500px) {
    body {
        font-size: 14px;
    }

    .box {
        padding: 2em 1em;
    }
   
    #quiz_top_bar .wrapper, .question_wrapper, #question_count_wrapper {
        width: 85vw;
    }

    .emphasis_box {
        padding: 1em 2em;
    }

}


/* Tiny Mobile -------------------------- */
@media only screen and (max-width:400px) {
    #tutorial_powerup_time {
        left: calc(50% - 10.6125em);
        width: 16em;
    }

    #tutorial_powerup_50 {
        left: calc(50% - 5.375em);
        width: 16em;
    }

}

/* Landscape Orientation Blocker -------------------------- 
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    #landscape_block {
        display: flex;
    }
}*/