Started work on adding horizontal layout

#21

style.css

@@ -65,9 +65,11 @@ h3 {
   display: inline;
   overflow: hidden;
   cursor: pointer;
-  background-color: #E7C02F !important;
-  border: solid #000 3px !important;
-  border-radius: 0 !important;
+  background-color: #003A5D !important;
+  border: solid #00C0DD 3px !important;
+  border-radius: 10px !important;
+  transition: color .1s;
+  transition: background-color .1s;
 }
 .button:hover {
   background-color: #d0ad2b !important;
@@ -255,8 +257,10 @@ input[type=checkbox] {
 }
 
 .tile {
-  border: 3px solid #cd222a;
+  border: 5px solid #FAB74F;
+  border-radius: 25px;
   margin: .2vw;
+  transition: .1s;
 }
 
 label {
@@ -757,3 +761,63 @@ div.tile:hover {
   transform: translate3d(-84px, -89px, 0) rotate(211deg);
   background: #f200ff;
 }
+
+@media only screen and (max-width: 825px) {
+  body {
+    display: flex;
+    flex-flow: column wrap;
+    height: 850px;
+    justify-content: center;
+  }
+
+  #header {
+    order: 1;
+    align-self: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 450px;
+  }
+
+  #header .button {
+    flex-basis: 0;
+    flex-grow: 1;
+    margin: 5px;
+  }
+
+  #game-logo {
+    width: 450px;
+  }
+
+  #title {
+    margin: 0;
+    padding: 0;
+  }
+
+  #controls {
+    flex-direction: row;
+    margin-left: 0;
+    width: 100%;
+  }
+
+  #board {
+    order: 2;
+    height: 850px;
+    margin: 15px;
+    margin-right: 15px;
+  }
+
+  #footer {
+    order: 1;
+    align-self: flex-start;
+    flex-wrap: wrap;
+    width: 450px;
+    margin: 0;
+  }
+
+  #footer .button {
+    font-size: 20px;
+    padding: 5px 12px 7px 12px;
+    flex-basis: 175px;
+    flex-grow: 1;
+  }
+}