{{ 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> You will be able to observe the player's selections and how many points the player got from each selection. However, <b> sometimes certain pieces of information will be missing</b>. For example, sometimes you may see which cell the player selected but not how many points the cell generated, as in the following example.
 </p>
        <p> </p>
        {{ next_button }}
    </div>
</div>



{{ endblock }}