Firefox CSS Issue

<div class="front">
            <button id="front-button">Hover Me!</button>
          </div>

const isMobile = window.innerWidth < 768;

const buttonText = isMobile ? 'Tap Me!' : 'Hover Me!';
document.getElementById('front-button').textContent = buttonText;

.front button {
  width: 120px;
  border: 1px solid black;
  background: black;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 20px;
  color: rgb(255, 255, 255);
  text-align: center;
}