<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>

    <!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">

<!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">

<style>

td {
	padding: 0px 0px 0px 0px;
	margin-left: 10px;
	height: 50px;
}

.centered-cell {
  text-align: center; /* Center the content horizontally within the cell */
}

.inputContainer {
	  display: inline-block; /* Display as an inline block */
	    vertical-align: middle; /* Center vertically within the cell */
	    width: 120px;
}

.inputContainer form {
	margin: 5% auto 5% auto;
}

.inputField {
	  display: flex;
  align-items: center; /* Align items vertically */
  width: 100%; /* Ensure inputField fills out inputContainer */
  height: 100%; /* Ensure inputField fills out inputContainer */
}
.inputField input {
	flex: 1;
	width: 70%;
	padding: 0px;
	margin: auto 2.5px auto 2.5px;
}
.inputField button {
	width: 30%;
	padding: 0px;
	margin: 0 2.5px 0 2.5px;
}

.square-button {
	background-color: white;
}


td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

</style>

  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    {% block scripts %}{% endblock %}
  </body>
</html>