diff --git a/templates/index.html b/templates/index.html
index 4cdbc21..d85271a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,24 +9,31 @@
     body {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      grid-template-rows: min-content 1fr min-content;
       margin: 0;
       padding: 0;
       height: 100vh;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 12pt;
       line-height: 18pt;
+      padding: 16pt;
+      box-sizing: border-box;
     }
 
     main {
       grid-column: 1;
       overflow-y: auto;
-      padding: 32pt 32pt 32pt 16pt;
+      padding-right: 48pt;
     }
 
     aside {
       grid-column: 2;
       overflow-y: auto;
-      padding: 32pt 16pt;
+    }
+
+    h1 {
+      grid-row: 1;
+      grid-column: 1 / 3;
     }
 
     [data-message] {
@@ -41,15 +48,36 @@
       display: block;
     }
 
-    button {
+    button, input {
       font: inherit;
     }
+    
+    footer {
+      grid-row: 3;
+      grid-column: 1 / 3;
+      font-size: 85%;
+    }
+
+    @media screen and (max-width: 600px) {
+      body {
+        display: block;
+      }
+
+      main {
+        padding-right: 16pt;
+      }
+
+      footer {
+        margin-top: 32pt;
+        padding-bottom: 16pt;
+      }
+    }
 
   </style>
 </head>
 <body>
+  <h1>Grafted trees</h1>
   <main>
-    <h1>Grafted trees</h1>
     <p>
       ‘Grafted trees’ takes quotes about trees from existing works. Each graft is defined by its gardener, who is present with a short biography scraped from Wikipedia. The reader chooses the amount of seasons the graft will grow. A random noun is picked and defined as a 'bud' from which a new branch grows by replacing the word by its definition. The algorithm is inspired by Oulipo's constraint of 'Littérature définitionnelle', invented by Marcel Bénabou in 1966: in a given phrase, one replaces every significant element (noun, adjective, verb, adverb) by one of its definitions in a given dictionary; one reiterates the operation on the newly received phrase, and again. 
     </p>
@@ -57,7 +85,7 @@
   <aside>
     <p>
       <form action="{{ BASEURL }}/graft" method="POST">
-        Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="4" /> years.<br /><br />
+        Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="3" /> years.<br /><br />
         <button type="submit">Graft & download</button>
       </form>
     </p>
@@ -68,6 +96,9 @@
       Something went wrong.
     </p>
   </aside>
+  <footer>
+    ‘Grafted trees’ is a publication by <a href="http://algoliterarypublishing.net/">An&nbsp;Algoliterary Publishing&nbsp;House</a>
+  </footer>
   <script>
     function getFilename (headers, fallback) {
       if (headers.has('Content-Disposition')) {
