{{ block title }}
  <center>  </center>
{{ endblock }}

{{ block content }}

<!-- CSS styles -->
<style>
  .otree-timer {
    display: none !important;
  }

  .table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column; /* this is for displaying the text under each other, instead of next to each other */
  }

  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    text-align: center;
  }

  /* CSS styles for the table */
  table {
    border-collapse: collapse;
  }

  td {
    border: 1px solid black;
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
  }

  .current-cell {
    background-color: lightgray;  /* Customize with your desired styling */
  }

    .highlighted-cell {
    background-color: lightpink;  /* Customize with your desired styling */
  }

  /* Beautfiul. This way I can use the pre-build function in pythong and now show how much time is left on the participant screen  */
  .otree-timer {
    display: none;
  }

  .form-section button {
    width: 100px;
    height: 40px;
    /* Additional styles for the button (e.g., background-color, font-size, etc.) */
  }

</style>

<!-- Container for centering the grid -->
<div class="table-container">

    <div class="form-container">
        <p> </p>
        <p> A “backward-looking” question may be asked if you did not have access to certain information.
        For example, if you do not see what cell the player selected but do see how many points the player received, you may be asked to guess what cell the player selected, as in the following example.
         </p>
        <p> </p>
        {{ next_button }}
    </div>
</div>



{{ endblock }}