move divId, css changes

HKCheckCompletion.js

@@ -22,6 +22,13 @@ var divEnd = [
 var strongStart = "<strong>"
 var strongEnd = "</strong>"
 
+var divIdIntro = "hk-intro";
+var divIdBosses = "hk-bosses";
+var divIdColosseum = "hk-colosseum";
+var divIdDreamers = "hk-dreamers";
+var divIdDreamNail = "hk-dreamnail";
+var divIdEquipment = "hk-equipment";
+
 const HK_BOSSES = {
     killedMawlek: "Brooding Mawlek",
     killedBigBuzzer: "Gruz Mother",
@@ -70,12 +77,6 @@ const HK_EQUIPMENT = {
 function HKCheckCompletion(jsonObject) {
 
     let HKPlayerData = jsonObject.playerData;
-    let divIdIntro = "hk-intro";
-    let divIdBosses = "hk-bosses";
-    let divIdColosseum = "hk-colosseum";
-    let divIdDreamers = "hk-dreamers";
-    let divIdDreamNail = "hk-dreamnail";
-    let divIdEquipment = "hk-equipment";
 
     for (i in HKPlayerData) {
         completionSymbol = SYMBOL_FALSE;

index.html

@@ -70,5 +70,13 @@
         <h2>Equipment:</h2>
     </div>
 
+    <div id="hk-maskshards">
+        <h2>Mask Shards:</h2>
+    </div>
+    
+    <div id="hk-nailarts">
+        <h2>Nail Arts:</h2>
+    </div>
+
 </body>
 </html>

style.css

@@ -1,29 +1,27 @@
+html {
+    font-size: 16px;
+}
 body {
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 15px;
 }
 p {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 0.6rem;
+    margin-bottom: 0.6rem;
 }
 .horizontal-line {
     padding-bottom: 1px;
     background: linear-gradient(90deg, #e9e9e9 0%, #FFFFFF 75%);
 }
 .smalltext {
-    font-size: 0.75em;
+    font-size: 0.8rem;
 }
 .entryNo {
     color: #d1d1d1;
 }
-.changelog {
-    margin-top: 0px;
-    padding-inline-start: 30px;
-}
 .date {
-    font-size: 0.75em;
+    font-size: 0.8rem;
     color: #737373;
-    margin-left: 1em;
+    margin-left: 1rem;
 }
 a,
 a:active,