Design fixes;

Adds font-awesome;
Adds scroll-down-button;

.idea/workspace.xml

@@ -7,6 +7,7 @@
     <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -44,7 +45,7 @@
       <workItem from="1597264411672" duration="27000" />
       <workItem from="1597264469454" duration="594000" />
       <workItem from="1597346228730" duration="1851000" />
-      <workItem from="1597348092890" duration="4393000" />
+      <workItem from="1597348092890" duration="4691000" />
     </task>
     <task id="LOCAL-00001" summary="Adds gitignore.">
       <created>1597348071361</created>
@@ -81,7 +82,14 @@
       <option name="project" value="LOCAL" />
       <updated>1597352391290</updated>
     </task>
-    <option name="localTasksCounter" value="6" />
+    <task id="LOCAL-00006" summary="Fix vh.">
+      <created>1597352494191</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1597352494191</updated>
+    </task>
+    <option name="localTasksCounter" value="7" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -93,25 +101,26 @@
     <MESSAGE value="Restyling." />
     <MESSAGE value="New responsive design which is mobile first." />
     <MESSAGE value="Color change;" />
-    <option name="LAST_COMMIT_MESSAGE" value="Color change;" />
+    <MESSAGE value="Fix vh." />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix vh." />
   </component>
   <component name="WindowStateProjectService">
     <state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
-    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597352391244">
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597352494150">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597352391244" />
+    <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597352494150" />
     <state x="172" y="0" key="SettingsEditor" timestamp="1597347922296">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
     <state x="172" y="0" key="SettingsEditor/0.0.1366.720@0.0.1366.720" timestamp="1597347922296" />
-    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597352392798">
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2" timestamp="1597352497413">
       <screen x="0" y="0" width="1366" height="720" />
     </state>
-    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597352392798" />
+    <state x="278" y="92" width="800" height="542" key="Vcs.Push.Dialog.v2/0.0.1366.720@0.0.1366.720" timestamp="1597352497413" />
     <state x="0" y="0" width="616" height="720" key="find.popup" timestamp="1597346688624">
       <screen x="0" y="0" width="1366" height="720" />
     </state>

app.css

@@ -31,7 +31,7 @@ body {
 #chat-box {
 	margin-top: 4em;
 	overflow-y: scroll;
-	height: 70vh;
+	height: 65vh;
 }
 
 #chatbox-wrapper {

index.html

@@ -12,6 +12,11 @@
 <body>
 <div class="container-fluid" id="kara">
     <h5 id="kara-banner">
+        <div class="float-right">
+            <div class="btn btn-sm btn-secondary" @click="scrollDown()">
+                <i class="fas fa-chevron-down"></i>
+            </div>
+        </div>
         Kara
     </h5>
 
@@ -56,6 +61,7 @@
                 required autofocus>
     </div>
 </div>
+<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.5.1.js">
 </script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">