Font Size randomly changes in mobile.

[SiteNotWorking]

I'm not experienced by any means and I am really struggling on fixing this issue on my site. The font and everything is how I want it to be, however on certain occasions, seemingly at random, the font will be larger or smaller in a few spots when on mobile. The 1st image is how it should be. The second image is where the font enlarges randomly after filtering (only sometimes). The 3rd image is correct, the 4th image is font small upon load. The "Filter Player" and "Filter Second Player" font, along with the "Lineup #" will sometimes load very small. If I rotate screen or refresh page, that will fix it. I only have one media query. It is set for larger screen mobiles such as my galaxy s21 plus. 

The main container is: container. 
each individual lineup is in a container within the main container. The container for lineups is lineup-container.
#toggleButton is the "Top 3 Man Stacks" text/button.

I have the viewport capped at 1000px which is different then what most sites do, however it looks fine on my monitor and mobile.

 

<meta name="viewport" content="width=1000,user-scalable=no">

Would appreciate any assistance. Thanks in advance.
 

html {
    overflow: hidden;
    height: 100%;
}
body {
  
  height: 100%; 
  min-height: 100vh; 
  line-height: 1.5; 
  margin: 0;
  padding: 0;
  
  color: #FFFFFF;
  font-family: Arial, sans-serif;
  background: linear-gradient(109.6deg, rgba(0, 0, 0, 0.93) 11.2%, rgb(63, 61, 61) 78.9%);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: auto;
 
}
.container .stack {
       font-size: 18px;
     height: 130px; /* height of  stack */
    border: 2px solid #808080; 
    margin: 10px 0; 
   padding: 15px; 
    }
       
 .container {
     top:20px;
    right:0px;
    
    margin-left: 15px;
    background-color: #000000; /* fallback*/
    background-color: rgba(0, 0, 0, .9); 
    border-radius: 5px;
    border: 2px solid gray;
    padding-top: 10px; 
 
    max-width: 1000px; 
    position: relative;
   margin:0 auto;
   text-align: center;
    
    padding-bottom:40px;

 }
  .container #toggleButton {
  font-size: 20px; 
 cursor: pointer;
  color: orange;
 text-decoration: underline;

}

.container .mobile-font-input {
    font-size: 18px; 
}
.lineup-container .mobile-font-input  {
    font-size: 14px; 
  }

 .btn {
    /* Your general button styles */
      background-color: black; 
    color: white; 
    border: 2px solid white;
    padding: 5px 10px; 
    font-size: 16px; 
    margin-right: 10px; 
}
.btn:hover {
    background-color: teal; 
    color: black; 
    font-weight: bold;
}
 .lineup-container {
    border: 1px solid white; 
    padding-bottom:5px;
    padding: 2px 2px; 
      margin-top: 10px; 
  margin-right: 2px; 
  margin-bottom: 5px; 
  margin-left: 2px; 
   border-radius: 8px;
   transform: translateZ(0);
  }
  
  .lineup-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    border-radius: inherit;
    z-index: -1;
  }

   
    table {
        width: 100%;
        border-collapse: collapse;
        font-size:15px;    
        margin-top: 10px;
      
    }
 
    th, td {
        text-align: center;
        padding: 8px;
        font-size:16px;
     
    }

    th {
        background-color: #474747; 
        color: #FFA500; 
        font-size:16px;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); 
        border: 1px solid black;
        text-shadow: 1px 1px 1px black;
    }
    
    td {
        border: 1px solid grey;
    }

    .edit-input {
    width: 50px; 
}
    .twitter-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #000000; /* fallback */
  background-color: rgba(0, 0, 0, 0.9); 
  padding: 10px 0; 
}

.twitter-follow-button {
  color: #fff; 
  text-decoration: none;
  font-size: 16px; 
}

@media only screen and (max-width: 1080px) {
    
       
  body {
    font-size: 22px; 
  }
  .container #toggleButton {
  font-size: 18px; 

}
 .container .stack {
       font-size: 24px;
    }
  
  .container .mobile-font-input  {
    font-size: 12px; 
  }
  .lineup-container .mobile-font-input  {
    font-size: 11px; 
  }
 
    .btn {
        padding: 15px 30px; 
        font-size: 24px; 
    }

  .lineup-container table,
  .lineup-container th,
  .lineup-container td {
    font-size: 24px;
  }
}

 

[SiteNotWorking]

Ended up just making them all non functional buttons. Not the right way obviously, but it works.