tutorial updates

client/src/styles/GLOBAL.css

@@ -197,6 +197,7 @@ button {
 }
 
 #how-to-use-container h1 {
+    color: #4b6bfa;
     font-family: signika-negative, sans-serif;
 }
 
@@ -251,11 +252,8 @@ input {
 }
 
 #how-to-use-container h3 {
-    font-size: 25px;
-}
-
-#how-to-use-container h1 {
-    font-size: 40px !important;
+    color: #b1afcd;
+    font-weight: bold;
 }
 
 .tutorial-image-small {
@@ -664,6 +662,24 @@ input {
     opacity: 0.85 !important;color:#ffffff !important;
 }
 
+@media(max-width: 550px) {
+    .how-to-use-header {
+        font-size: 25px;
+    }
+    #how-to-use-container h3 {
+        font-size: 20px;
+    }
+}
+
+@media(min-width: 551px) {
+    .how-to-use-header {
+        font-size: 40px;
+    }
+    #how-to-use-container h3 {
+        font-size: 25px;
+    }
+}
+
 
 @keyframes lds-spinner {
     0% {

client/src/views/how-to-use.html

@@ -32,7 +32,7 @@
         players. This app attempts to provide the utilities necessary to run Werewolf with all the different roles you want,
         wherever you can access the internet.
     </div>
-    <h1 class="">Creating a Game</h1>
+    <h1 class="how-to-use-header">Creating a Game</h1>
     <div class="how-to-use-section">
         Creating a game through the app has 3 main components:
         <br>
@@ -57,19 +57,24 @@
         <br><br>
         <h3>Step Two: Build your deck</h3>
         <br>
-        A default set of common roles are available to you on this page. <span class="emphasized">Available roles</span>
+        A default set of common roles are available to you on this page. <span class="emphasized">Available Roles</span>
         are ones that have a widget where you can adjust their quantity and add them to the current game. They have been
         "taken out of the box," so to speak:
         <br><br>
         <img class='tutorial-image-small' src="../images/tutorial/default-roles.PNG"/>
         <br><br>
-        You also have a <span class="emphasized">custom role box</span>. These are not yet "available," in that they
+        You also have a <span class="emphasized">Custom Role Box</span>. These are not yet "available," in that they
         are still "in the box." If you want them in the game, click the green plus button, and they will become part of the
         available roles - a widget will be created, and you can increment or decrement the quantity of that card in the game.
         Custom roles can be created, removed, edited, and imported/exported via a formatted text file:
         <br><br>
         <img class='tutorial-image-small' src="../images/tutorial/custom-roles.PNG"/>
         <br><br>
+        Here is this in action. We add the "Clawed Minion" from the Custom Role Box to the Available Roles, and then
+        we increment the quantity to 1 and see it has been added to the game:
+        <br><br>
+        <img class='tutorial-image-small' src="../images/tutorial/add-custom-role.gif"/>
+        <br><br>
         <h3>Step Three: Set an optional timer</h3>
         <br>
         If you don't fill in these fields, the game will be untimed. If you do, you can use a time between 1 minute