{{ 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> The player was asked to click on a cell within the grid. Clicking on a cell revealed a point value that the player immediately received. The general procedure is as follows: </p>
        <ol>
            <li> Player's selection: You see the cell the player selected. </li>
            <li> Player's points: You see how many points the player received for their selection. </li>
        </ol>
        <p> You will see an exemplary procedure as soon as you click the Next button. </p>

        {{ next_button }}

    </div>
</div>



{{ endblock }}