{{ block title }}
<h1><b>Instructions</b></h1>
{{ endblock }}

{{ block content }}
<br>
 <ul>
  <li>You will be playing a simple game that is comparable to a real life slot machine, with bets and the potential for payoffs</li>
     <li>There are 3 different images that can show up. <b>A plum, a watermelon, and a lucky 7:</b></li>
</ul>

<br>
<img src="https://i.imgur.com/KDxzOKe.png" class="slots" alt="Examples of reels" >
<br>

<ul>
    <li>You can "spin" the machine to receive payoffs</li>
    <li>Winning combos and their payoffs are shown below:</li>
</ul>

<br>
<img src="https://i.imgur.com/OGj6KIl.png" class="payoffs" alt="Payoffs">
<br>

<ul>
    <li>These payoffs will be displayed on the next page as well for convenience</li>
    <li>You will be endowed with a starting amount of <b>100</b> tokens, and each bet on the slot machine costs you <b>10</b> tokens</li>
    <li>Each token is equivalent to one ticket in the prize draw <b>(3 x £20 Amazon vouchers)</b>. You can win tokens to get a higher amount of tickets in the prize draw</li>
    </ul>
<br>
<ul>    <li><b>Whenever you are out of tokens you will be unable to carry on playing the game</b></li>
    <li><b>If you have tokens, and you wish to stop playing, you can simply exit the tab and your results will be automatically recorded for the raffle draw</b></li>
</ul>


    {{ formfields }}

<p class="goodluck"><b>GOOD LUCK!</b></p>

<style>

    .goodluck {
  font-family: Verdana, serif;
  font-size: medium;
}

h1 {
  text-align: center;
}

    body {
  background-color: lightblue;
}

title {
  color: white;
  text-align: center;
}

p {
  font-family: Verdana, serif;
  font-size: x-small;
}

.slots {
  width: 350px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 8px solid black;
}

.payoffs {
      width: 350px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ul {
    font-family: Verdana, serif;
  font-size: medium;
}

.center {
    margin-left: auto;
  margin-right: auto;
}
</style>


<div class="center">
    {{ next_button }}
</div>

<p>Graphics attributed to <b>macrovector</b> - <a href="https://www.freepik.com/vectors/gambling">Gambling vector created by macrovector - www.freepik.com</a>

{{ endblock }}