Add a form for creating / joining sessions.

public/scss/main.scss

@@ -6,12 +6,12 @@ $background-grey: #f4f4f4;
 
 h1, h2, h3, h4, h5, h6 {
     font-family: "Indie Flower", serif;
+    text-align: center;
 }
 
 h1 {
     font-size: 5em;
     margin: 0px;
-    text-align: center;
 }
 
 body {
@@ -85,3 +85,85 @@ body {
         background-color: white;
     }
 }
+
+.split-wrapper {
+    display: flex;
+    @media screen and (max-width: 640px) {
+        flex-direction: column;
+    }
+    width: 100%;
+}
+
+.split-item {
+    flex-grow: 1;
+    box-sizing: border-box;
+}
+
+.split-wrapper form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+
+    input {
+        margin-top: 20px;
+        padding: 5px;
+        padding-left: 10px;
+        padding-right: 10px;
+        border: none;
+        outline: none;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    input[type="radio"] {
+        opacity: 0;
+        width: 0px;
+        height: 0px;
+
+        &:checked ~ label {
+            color: tomato;
+            transition: color .25s;
+        }
+    }
+
+    input[type="submit"] {
+        padding: 10px;
+        background-color: tomato;
+        color: white;
+
+        &:focus, &:hover {
+            background-color: inherit;
+            color: tomato;
+            transition: background-color .25s, color .25s;
+        }
+    }
+
+    input[type="text"] {
+        background-color: inherit;
+        border-bottom: solid tomato;
+        border-width: 2px;
+
+        &:focus {
+            border-width: 3px;
+            transition: background-color .25s, border-width .25s;
+        }
+
+        height: 3em;
+        box-sizing: border-box;
+        display: block;
+    }
+    
+    .radio-parent {
+        display: flex;
+        margin-top: 20px;
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .radio-wrapper {
+        flex-grow: 1;
+        display: inline-block;
+        text-align: center;
+    }
+}