styling updates to arcade activities

Author: hmillersarah

.DS_Store

@@ -397,9 +397,10 @@
 
 .h5p-dialogcards .h5p-dialogcards-retry {
   right: 1em;
+  font-family: "ibm-plex-sans";
 }
 
-.h5p-dialogcards .h5p-dialogcards-retry:before {
+.h5p-dialogcards .h5p-dialogcards-retry:after {
   font-family: "H5PFontAwesome4";
   content: "\f01e";
 }

h5p-player/h5p-libraries/H5P.Dialogcards-1.9/dist/h5p-dialogcards.css

@@ -162,10 +162,12 @@
         <section id="quiz" class="white-bg card-section">
           <h2>Quiz</h2>
           <h3>IMS topic</h3>
-          <div class="activity">
-            <h3 id="feedback"></h3>
-            <div id="mc-quiz" class="quiz"></div>
-            <cds-button id="next-btn">Next</cds-button>
+          <div class="activity-container">
+            <div class="activity">
+              <h3 id="feedback"></h3>
+              <div id="mc-quiz" class="quiz"></div>
+              <cds-button id="next-btn">Next</cds-button>
+            </div>
           </div>
         </section>
 

ims-arcade.html

@@ -1,45 +1,52 @@
 * {
-    margin: 0;
-    padding: 0;
-    font-family: IBM Plex Sans, Helvetica Neue, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: IBM Plex Sans, Helvetica Neue, Arial, sans-serif;
+}
+
+.activity-container {
+  background-color: #fff;
+  width: 100%;
+  padding: 2em;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
 }
 
 .activity {
-    background-color: #fff;
-    width: 100%;
-    padding: 2em;
+  background-color: #fff;
 }
 
 .quiz h2 {
-    font-size: 1.125em;
-    font-weight: 600;
-    padding: 0;
+  font-size: 1.125em;
+  font-weight: 600;
+  padding: 0;
 }
 
 #question-index {
-    font-size: 1em;
+  font-size: 1em;
 }
 
 .btn {
-    padding: 0.2em 2em 0.2em 0.5em;
-    margin: 0.5em 0;
-    border: 2px #fff solid;
+  padding: 0.2em 2em 0.2em 0.5em;
+  margin: 0.5em 0;
+  border: 2px #fff solid;
 }
 
 .disable {
-    cursor: no-drop;
+  cursor: no-drop;
 }
 
 #next-btn {
-    margin: 1em 0;
+  margin: 1em 0;
 }
 
 .correct {
-    border: 2px #24a148 solid;
-    border-radius: 2px;
+  border: 2px #24a148 solid;
+  border-radius: 2px;
 }
 
 .incorrect {
-    border: 2px #da1e28 solid;
-    border-radius: 2px;
-}
+  border: 2px #da1e28 solid;
+  border-radius: 2px;
+}