CSS Media Query - Land VS Por with Keyboard

CSS Media Query - Land VS Por with Soft-Keyboard open

HTML

<h1 class='land'>Viewing in LANDSCAPE Mode</h1><h1 class='por'>Viewing in PORTRAIT Mode</h1><hr>
<input type="text" name="input" id="input" size="60" value="" placeholder="Press here to bring device soft-keyboard" />
<hr>
<br>
<div>
    Sample Text - Look for color Change
    <br>* Blue - PORTRAIT
    <br>* Red - LANDSCAPE
</div>

CSS

div {
        width: 200px;
        height: 200px;
        background-color: green;
      }

    @media all and (orientation:portrait)
    {
      /* My portrait based CSS here */
      div { background-color: blue; }
      
        .land { display: none; }
        .por {display: block; }
    }
    
    @media all and (orientation:landscape)
    {
      /* My landscape based CSS here */
        div { background-color: red; }
       .land { display: block; }
       .por {display: none; }
    }