Improved homepage styling

app/static/css/main.css

@@ -0,0 +1,56 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+body {
+    background: #fff;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.search-container {
+    width: 80%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 600px;
+}
+
+.search-items {
+    width: 100%;
+    position: relative;
+    display: flex;
+}
+
+#search-bar {
+    width: 100%;
+    border: 3px solid #0000FF;
+    padding: 5px;
+    height: 40px;
+    border-radius: 10px;
+    outline: none;
+    font-size: 24px;
+    color: #0000FF;
+    border-radius: 10px 10px 0 0;
+    max-width: 600px;
+}
+
+#search-bar:focus{
+    color: #0000FF;
+}
+
+#search-submit {
+    width: 100%;
+    height: 40px;
+    border: 1px solid #0000FF;
+    background: #0000FF;
+    text-align: center;
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    align-content: center;
+    align-items: center;
+    margin: auto;
+    border-radius: 0 0 10px 10px;
+    max-width: 600px;
+}
+

app/templates/index.html

@@ -1,9 +1,10 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="/static/js/controller.js"></script>
 <link rel="stylesheet" href="/static/css/main.css">
 
-<div>
+<div class="search-container">
-    <h1>No-AMP Search</h1>
+    <div class="search-fields">
-
+        <input type="text" id="search-bar">
-    <input type="text" id="search-bar" name="search-bar"/>
+        <button type="submit" id="search-submit">Search</button>
-    <button id="search-submit" type="submit">Go</button>
+    </div>
 </div>