Pasted

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
 
    <title>Chatroom</title>
    <meta name="description" content="Messages">
    <meta name="author" content="Isak et Nicolas">
 
  <style>
    html, body {
        overflow: hidden;
        height: 100%;
    }
 
    body {
        background: url("static/images/BG.jpg") center center fixed;
    }
 
    form {
        background-color: white;
        margin-top: 8%;
        margin-left: 10%;
        margin-right: 10%;
    }
 
    #message-box {
 
 
    }
 
    #chat-box {
        margin-left: 10%;
        margin-right: 10%;
        background-color: white;
    }
 
  #chat {
    margin-top: 15px;
    padding: 5px;
        height: 500px;
        overflow-y: scroll;
  }
 
  .message {
    padding: 0px 20px 10px 5px;
B  }
 
  .date {
    font-size: 12px;
    color: grey;
  }
 
  .username {
    font-size: 16px;
    font-weight: bold;
  }
 
  .content::before {
        font-weight: bold;
    content: " : ";
  }
 
  .content {
    font-size: 16px;
    color: black;
  }
 
    input {
        display: inline-block;
    }
  </style>
 
</head>
 
<body>
    <form action="" method="post">
        <fieldset>
            <legend>Send Message</legend>
            <textarea name="message" cols="80" rows="4" maxlength="200" style="font-size: 15px; resize: none;"></textarea>
            <br /> <br />
            <input type="submit" name="button" value="Submit" style="float: left" />
            <input type="submit" name="button" value="Logout" style="float: right" />
        </fieldset>
    </form>
 
    <div id="chat-box">
      <fieldset id="chat">
        <legend>Chat</legend>
            {% for message in chat %}
      <div class="message">
        <span class="date">[{{ message[0] }}]</span>
        <span class="username" style="color: #{{ message[1] }};">{{ message[2] }}</span>
        <span class="content">{{ message[3] }}</span>
            </div>
            {% endfor %}
      </fieldset>
    </div>
</body>
</html>