<!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>