<div class="form_container" id="game_container">
  <form id="gameForm" method="_POST">
    <div class="game-header">
      <h2>The Word Guessing Game</h2>
      <p id="game_intro">The game that insults you, whether you win or lose!</p>
    </div>
    <div id="game-howto">
      <p class="center-text">
        Please enter a single alphabetical character (A-Z) into the input
        box belowand and click &quot;Guess&quot; to see if the letter
        exists in the hidden word.</p>
      </p>
    </div>
    <div><p id="notifications"></p></div>
    <div class="formField word-display-field">
      <ul id="current_word"></ul>
    </div>
    <div id="alphabet_container" class="alphabet-grid">
      </div>
    <div id="guess_letter_container" class="formField">
      <p>Guess a letter:</p>
      <input
        type="text"
        name="guess_letter"
        id="guess_letter"
        size="1"
        maxlength="1"
        pattern="[a-zA-Z]"
        value=""
        required
        placeholder="?"
      />
    </div>
    <div id="game_metrics">
      <div class="formField metric_group">
        <span class="label">Attempts</span>
        <input type="number" step="1" id="guess_count" value="0" disabled />
      </div>
      <div class="formField">
        <span class="label">Guesses</span>
        <ul id="guesses"></ul>
      </div>
    </div>
    <div class="submitField">
      <input
        type="button"
        id="guess_button"
        name="guess_button"
        value="Guess"
      />
    </div>
  </form>
</div>
</main>