Improve layout on small screens

	First tab only contains one title
	Canvas is centered

static/style.css

@@ -180,12 +180,6 @@ div.navButtons {
   margin-top: 2em;
 }
 
-main {
-  background-color: #ebf3ff;
-  min-height: 100%;
-  padding-left: 40px;
-}
-
 body {
   display: flex;
   flex-direction: row;
@@ -221,16 +215,33 @@ body {
   textarea {
     height: 3.5em;
   }
+
+  main > div:first-child {
+    margin: auto;
+  }
+
+  h2.title-big {
+    display: none;
+  }
 }
 
 @media (min-width: 992px) {
   main {
     min-height: 100vh;
+    padding-left: 40px;
   }
 
   input#step2value {
     height: 200px;
   }
+
+  main > div > #output {
+    margin-top: 7vw;
+  }
+
+  h2.title-small {
+    display: none;
+  }
 }
 
 main > div:nth-child(1) {
@@ -243,11 +254,6 @@ main a {
   font-weight: bold;
 }
 
-main > div > #output {
-  margin-top: 7vw;
-  display: block;
-}
-
 a#save-image {
   padding-left: 2em;
   padding-right: 2em;

views/index.ejs

@@ -26,7 +26,8 @@
 	<button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
       </div>
       <div id="step1">
-	<h2>Choisissez la couleur de fond</h2>
+	<h2 class="title-small">Choisissez 2 couleurs</h2>
+	<h2 class="title-big">Choisissez la couleur de fond</h2>
 	<div class="colorpicker">
 	  <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
 	  <label for="bg-red">
@@ -57,7 +58,7 @@
 	    <span style="background-color: #000"></span>
 	  </label>
 	</div>
-	<h2>Choisissez la couleur du texte</h2>
+	<h2 class="title-big">Choisissez la couleur du texte</h2>
 	<div class="colorpicker">
 	  <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
 	  <label for="fg-red">