/* December 12, 2024 */
    /* "wordle-work-area/wordle-work-area-mobile/mobile_wordle_work_area_v2-3.css" */

@media screen and (max-height: 950px) {
    #correct_word_wrapper { border: none;}
}

@media screen and (max-width: 450px) {
    #pull_me_down:before {
        content: '';
        width: calc( ((100vw - (((55px + (70 - 55) * ( (100vw - 350px) / (450 - 350)  )) * 5) + (3px * 4)))  / 2) - 3px  );
    }


    #correct_row, #input_row_main, .yellow_letters_row { column-gap: 3px;}
    #yellow_boxes_display, .yellow_letters_row { margin-top: 3px;}

    .correct_letter_box {
        font-size: 38px;
        width: calc(  45px + (60 - 45) * ( (100vw - 300px) / (450 - 300)  )  );
        height: calc(  45px + (60 - 45) * ( (100vw - 300px) / (450 - 300)  )  );
    }

    .letter_box, .yellow_box {
        font-size: calc(  34px + (45 - 34) * ( (100vw - 350px) / (450 - 350)  )  );
        width: calc(  60px + (70 - 60) * ( (100vw - 350px) / (450 - 350)  )  );
        width: calc(  55px + (70 - 55) * ( (100vw - 350px) / (450 - 350)  )  );
    }

    .letter_box {
        height: calc(  55px + (70 - 55) * ( (100vw - 350px) / (450 - 350)  )  );
    }

}





@media screen and (max-height: 880px) {
    #pull_me_down:before {
        content: '';
        width: calc( ((100vw - (((60px + (70 - 60) * ( (100vh - 700px) / (880 - 700)  )) * 5) + (4px * 4)))  / 2) - 3px  );
    }


    #correct_row, #input_row_main, .yellow_letters_row { column-gap: 4px;}
    #yellow_boxes_display, .yellow_letters_row { margin-top: 4px;}

    .correct_letter_box {
        height: calc(  50px + (60 - 50) * ( (100vh - 700px) / (880 - 700)  )  );
        width: calc(  50px + (60 - 50) * ( (100vh - 700px) / (880 - 700)  )  );
        width: calc(  50px + (60 - 50) * ( (100vh - 500px) / (880 - 500)  )  );
    }


    .letter_box {
        width: calc(  60px + (70 - 60) * ( (100vh - 700px) / (880 - 700)  )  );
        height: calc(  60px + (70 - 60) * ( (100vh - 700px) / (880 - 700)  )  );
    }

    .yellow_box {
        height: calc(  50px + (70 - 50) * ( (100vh - 676px) / (880 - 676)  )  );
        font-size: calc(  40px + (50 - 40) * ( (100vh - 676px) / (880 - 676)  )  );
        width: calc(  60px + (70 - 60) * ( (100vh - 676px) / (880 - 676)  )  );
    }
    .letter_box, .yellow_box {
        font-size: calc(  40px + (50 - 40) * ( (100vh - 676px) / (880 - 676)  )  );
    }
}

@media screen and (max-height: 769px) {
    .yellow_letters_row { margin-top: 3px;}
}

@media screen and (max-height: 700px) {
    .correct_letter_box { font-size: calc(  28px + (38 - 28) * ( (100vh - 450px) / (700 - 450)  )  );}
}