Add simple styling to submit page

public/stylesheets/style.css

@@ -1,5 +1,5 @@
 body {
-  padding: 50px;
+  padding: 1em;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 

public/stylesheets/submit.css

@@ -1,4 +1,41 @@
+h1 {
+    text-align: center;
+}
+
 form {
   display: flex;
   flex-direction: column;
+  max-width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+span {
+    display: flex;
+  flex-direction: column;
+}
+
+
+#sport-dropdown {
+    width: 100%;
+}
+
+.form-section {
+    margin-bottom: 0.75em;
+}
+
+.form-section-input {
+    flex-direction: row;
+}
+
+input {
+    width: 100%;
+}
+
+.score-input{
+    width: 35%;
+}
+
+button {
+    margin-top: 1.5em;
 }

views/index.pug

@@ -6,29 +6,35 @@ block stylesheets
 block content
   h1 Submit Score
   form(action='/submit', method='POST')
-    span
+    span(class='form-section')
       label Sport
-      select(name="sport") 
+      span(class='form-section-input')
-        option(value="Football" selected) Football
+        select#sport-dropdown(name="sport") 
-      select(name="gender")
+          option(value="Football" selected) Football
-        option(value="Male" selected) Male 
+        select#gender-dropdown(name="gender")
-        option(value="Female") Female
+          option(value="Male" selected) Male 
-      select(name="division")
+          option(value="Female") Female
-        option(value="Varsity") Varsity 
+        select#division-dropdown(name="division")
-        option(value="JV-A") JV-A 
+          option(value="Varsity") Varsity 
-        option(value="JV-B") JV-B
+          option(value="JV-A") JV-A 
-    span
+          option(value="JV-B") JV-B
+    span(class='form-section')
       label Home Team
-      input(type="text", name="home-team")
+      span(class='form-section-input')
-      input(type="number", name="home-team-score", value="0")
+        input(type="text", name="home-team")
-    span 
+        input(class="score-input", type="number", name="home-team-score", value="0")
+    span(class='form-section')
       label Visiting Team
-      input(type="text", name="visiting-team")
+      span(class='form-section-input')
-      input(type="number", name="visiting-team-score", value="0")
+        input(type="text", name="visiting-team")
-    span
+        input(class="score-input", type="number", name="visiting-team-score", value="0")
+    span(class='form-section')
       label Submitter
-      input(type="text", name="submitter")
+      span(class='form-section-input')
-    span 
+        input(type="text", name="submitter")
+    span(class='form-section')
       label Send info to
-      input(type="email", name="email", placeholder="email@example.com")
+      span(class='form-section-input')
+        input(type="email", name="email", placeholder="email@example.com")
+    span(class='form-section')
       button(type="submit") Submit

views/layout.pug

@@ -2,7 +2,7 @@ doctype html
 html
   head
     title= title
+    link(rel='stylesheet', href='/stylesheets/style.css')
     block stylesheets
-      link(rel='stylesheet', href='/stylesheets/style.css')
   body
     block content