Update the overlay styling

site/standard/health/app.js

@@ -25,9 +25,6 @@ const app = new Vue({
 		currentHealth() {
 			return this.totalHealth - this.lostHealth;
 		},
-		parsedText() {
-			return this.current.split(` █ `).join(`<br>`);
-		},
 	},
 	methods: {
 		connected() {

site/standard/health/index.html

@@ -25,7 +25,7 @@
 						<div v-for="_ in currentHealth" class="health filled"></div>
 						<div v-for="_ in lostHealth" class="health empty"></div>
 					</div>
-					<h2 id="word" v-html="parsedText"></h2>
+					<h2 id="word">{{current}}</h2>
 				</div>
 			</div>
 		</transition>

site/standard/health/style.css

@@ -20,14 +20,24 @@ html, body, #app {
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
-	background: rgba(0, 0, 0, .5);
+	background: rgba(60, 51, 146, 0.8);
 	position: relative;
 	text-align: center;
 	border-radius: 15px;
+	padding: 1rem;
+	color: white;
 }
 
 h1 {
-	margin-bottom: 5px;
+	line-height: 2rem;
+	margin: 5px 0;
+	letter-spacing: 2px;
+}
+
+h2 {
+	line-height: 1.5rem;
+	margin: 20px 0 5px;
+	letter-spacing: 2px;
 }
 
 #health-bar {