Keyboard Performing Differently on Mobile

Question

I have a keyboard created in html and designed to be responsive. The keyboard looks and works correctly on desktop, but is cut off and looks completely different in mobile browsers. On mobile the color and shape of buttons is different, and the "delete" and "q" buttons are cut off with no option to scroll. Examples of the keyboard on both types of browsers and a snippet are below.

index.html

h1 {
  text-align: center;
}

p {
  text-align: center;
}

img {
  float: center;
  width: 20vw;
  height: 20vw;
  object-fit: scale-down;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.letter-box {
  border: 2px solid gray;
  border-radius: 3px;
  margin: 2px;
  font-size: 2rem;
  font-weight: 700;
  height: 3rem;
  width: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 2px solid black;
}

.letter-row {
  display: flex;
}

#keyboard-cont-cont {
  width: 100vw;
  overflow: visible;
}

#keyboard-cont {
  margin: 1rem 0;
  left: 50%;
  top: 50%;
  padding: 0vw 40vw;
  display: flex;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  background: solid lightGray;
  font-family: monospace;
  --e: calc(100vw / 35);
}

#keyboard-cont div {
  display: flex;
  overflow: auto;
}

.center {
  width: 50%;
}

.second-row {
  margin: 0.5rem 0;
  margin: calc(var(--e) / 2);
  position: relative;
}

.keyboard-button {
  font-size: var(--e);
  font-weight: 700;
  padding: calc(var(--e) / 2);
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.center {
  width: 50%;
}

.first-row {
  position: relative;
  overflow: auto;
}

.second-row {
  margin: 0.5rem 0;
  position: relative;
  overflow: auto;
}

.third-row {
  position: relative;
  overflow: auto;
}

.keyboard-button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  text-transform: uppercase;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 40px;
  line-height: 25px;
  border-radius: 4px;
}
.header button {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header v.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header button:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header button.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

@media screen and (max-width: 450px) {
  .keyboard-button{
     font-size: 1rem;
  font-weight: 600;
  padding: 0.1rem;
  }
}

<div id="keyboard-cont-cont">
      <div id="keyboard-cont">
          <div class="first-row">
              <button class="keyboard-button">q</button>
              <button class="keyboard-button">w</button>
              <button class="keyboard-button">e</button>
              <button class="keyboard-button">r</button>
              <button class="keyboard-button">t</button>
              <button class="keyboard-button">y</button>
              <button class="keyboard-button">u</button>
              <button class="keyboard-button">i</button>
              <button class="keyboard-button">o</button>
              <button class="keyboard-button">p</button>
          </div>
          <div class="second-row">
              <button class="keyboard-button">a</button>
              <button class="keyboard-button">s</button>
              <button class="keyboard-button">d</button>
              <button class="keyboard-button">f</button>
              <button class="keyboard-button">g</button>
              <button class="keyboard-button">h</button>
              <button class="keyboard-button">j</button>
              <button class="keyboard-button">k</button>
              <button class="keyboard-button">l</button>
          </div>
          <div class="third-row">
              <button class="keyboard-button">Del</button>
              <button class="keyboard-button">z</button>
              <button class="keyboard-button">x</button>
              <button class="keyboard-button">c</button>
              <button class="keyboard-button">v</button>
              <button class="keyboard-button">b</button>
              <button class="keyboard-button">n</button>
              <button class="keyboard-button">m</button>
              <button class="keyboard-button">Enter</button>
          </div>
      </div>
    </div>

Mobile Keyboard

Desktop Keyboard