Phaser 3 responsive html input overlay

[Voxin]

Hi guys,

I am trying to create an text input box with a number. 

I understood that the best way to do this is to create an html overlay.
My problem is that when I change the browser size the overlay goes out of position with the actual game canvas.

If anyone has any help to offer it would be great.

I attached my html and my css files.

<div id="game">
        <div class="gameoverlay">
            <div class="overlay">
                <div class="texts" id="texts">
                    <input type="number" id="cashexceed" class="inputtexts" min="1" max="1000">
                    <input type="number" id="cashincrease" class="inputtexts" min="1" max="1000">
                    <input type="number" id="cashdecrease" class="inputtexts" min="1" max="1000">
                </div>
            </div>
        </div>

...
</div>

 

html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden; }

  .inputtexts{
    z-index: 1000;
    margin-bottom:3px;
    width: 5px;
    max-height: 1px;
    float:left;
    padding: 0px;
    font-size: 10px;
    pointer-events: auto;
  }

  .texts{
    max-width: 30px;
    text-align: center;
    position: inherit;
    bottom: 50%;
    top: 50%;
    left: 40%;
    right: 60%;

  }
  

  .overlay{
      /* visibility:hidden;  */
        pointer-events: none;
        position: absolute;
        top: 0%;
        bottom: 0%;
        right:0%;
        left:0%;
        width:100%;
        height:100%;
        text-align:center;
        z-index: 1000;
  } 

#game {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%; 
}
  #game canvas 
  {
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
  }