Improve mobile look, background image edit

HKCheckCompletion.js

@@ -16,6 +16,10 @@ let divStart = [
     "<div class='flex-container'>"
 ].join("\n");
 
+let divStartCenter = [
+    "<div class='flex-container align-center'>"
+].join("\n");
+
 let divEnd = [
     "</div>"
 ].join("\n");
@@ -813,7 +817,7 @@ function CheckHealthMasks(divId, masks, permadeathMode) {
         maskImages += maskImg;
     }
 
-    document.getElementById(divId.id).innerHTML += divStart + icon + textFill + maskImages + divEnd;
+    document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + maskImages + divEnd;
 }
 
 /**
@@ -833,7 +837,7 @@ function CheckSoulOrbs(divId, totalSoul) {
         soulImages += soulImg;
     }
 
-    document.getElementById(divId.id).innerHTML += divStart + icon + textFill + soulImages + divEnd;
+    document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + soulImages + divEnd;
 }
 
 /**
@@ -846,7 +850,7 @@ function CheckGeo(divId, geoValue) {
     let icon = SYMBOL_EMPTY;
     let textFill = "<span>Geo:</span><img src='img/geo.png' class='geo-symbol'><b>" + geoValue + "</b>";
 
-    document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd;
+    document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + divEnd;
 }
 
 /**

index.html

@@ -46,7 +46,7 @@
     <p class="smalltext">
         Please check the <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2209910193" target="_blank">[ Official Steam Guide ]</a> on how to use this Tool.<br>
         Shortcuts: <a href="https://bloodorca.github.io/hollow/" target="_blank">[ Decode ]</a> your Hollow Knight user*.dat <a href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">[ Save File ]</a><br>
-        Paste the decoded text into the text box below. <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br>
+        <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br>
         <a href="https://www.paypal.me/ReznoRMichael" target="_blank">Support Tool development</a> 🉑 <a href="https://www.youtube.com/c/MichaelReznoR" target="_blank">Youtube</a> 🉑 <a href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank">Source Code</a>
     </p>
 

style.css

@@ -30,34 +30,34 @@ html {
 body {
     font-family: 'Heebo', sans-serif;
     color: #fff;
-    background-color: #050d18;
+    background-color: #050d19;
     margin: 0;
+    overflow: auto;
 }
 
-body::-webkit-scrollbar,
+::-webkit-scrollbar {
-textarea::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }
 
-body::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
-textarea::-webkit-scrollbar-track,
-body::-webkit-scrollbar-track-piece,
-textarea::-webkit-scrollbar-track-piece,
-textarea::-webkit-resizer {
-    background-color: #050d18;
-}
-
-body::-webkit-scrollbar-thumb,
-textarea::-webkit-scrollbar-thumb {
     background-color: #1e4d6c;
 }
 
-body::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:hover {
-textarea::-webkit-scrollbar-thumb:hover {
     background-color: #2e5d7c;
 }
 
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-piece {
+    background: url("img/scrollbar-track.png") repeat-y !important;
+}
+
+::-webkit-resizer {
+    background-color: #050d19;
+    color: #1e4d6c;
+}
+
 #background {
     position: fixed;
     padding: 0;
@@ -70,12 +70,14 @@ textarea::-webkit-scrollbar-thumb:hover {
     background-size: auto 100%;
     background-position: center top;
     background-repeat: no-repeat;
+    background-attachment: fixed;
     z-index: 1;
 }
 
 #content {
     max-width: 550px;
     margin: 0 auto;
+    padding: 0 .6rem;
     position: relative;
     z-index: 1000;
 }
@@ -112,6 +114,11 @@ textarea {
     background-color: rgba(0, 0, 0, 0);
     color: #fff;
     border: 1px solid #e3ebf7;
+    padding: 0;
+    margin: 2px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    overflow-wrap: normal;
 }
 
 textarea::placeholder {
@@ -122,7 +129,8 @@ textarea::placeholder {
 
 #save-area {
     width: 100%;
-    margin: .5rem 0 .3rem 0;
+    height: 5.65rem;
+    margin: .5rem 2px .3rem 2px;
 }
 
 .buttons {
@@ -202,8 +210,9 @@ a:hover {
 
 .flex-container {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
-    align-items: center;
+    align-items: normal;
     justify-content: left;
 }
 
@@ -211,6 +220,10 @@ a:hover {
     flex-direction: row;
 }
 
+.align-center {
+    align-items: center;
+}
+
 .health-mask,
 .soul-orb,
 .geo-symbol {