Move spectrum to bottom of screen

index.html

@@ -4,6 +4,7 @@
     <title>What color is it?</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="user-scalable=yes,initial-scale=1" />
+    <link rel="shortcut icon" href="favicon.ico" />
     <style>
 * { color: #fff; }
 html, body, body > div { margin: 0; height: 100%; }
@@ -16,11 +17,24 @@ h1 {
 }
 h2 { font-family: courier; }
 
+#whatcolorisit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+#whatcolorisit > div {
+  width: 100%;
+}
+
 .spectrum {
   height: 50px;
   background-color: #000;
   overflow: hidden;
+  align-self: flex-end;
 }
+
 .spectrum > div {
   width: 1px;
   height: 100%;
@@ -75,9 +89,9 @@ function WhatColorIsIt(mainDiv, toColor) {
   this.timeDiv.className = 'time';
   this.timeDiv.innerHTML = '<h1><time></time></h1><h2></h2>';
 
-  this.mainDiv.appendChild(this.spectrumDiv);
   this.mainDiv.appendChild(this.timeDiv);
   this.mainDiv.appendChild(this.controlsDiv);
+  this.mainDiv.appendChild(this.spectrumDiv);
 
   this.current();
 };