Fix underline and magic styles

docs/js/main.js

@@ -36,3 +36,32 @@ else
 const noLeftPanel = document.querySelectorAll('#content.no-left-panel')[0];
 if (noLeftPanel != null)
   document.querySelectorAll('#side-nav')[0].classList.add('no-left-panel');
+
+// <> Magic Text
+function getRandomChar() {
+	chars = "ÂÃÉÊÐÑÙÚÛÜéêëãòóôēĔąĆćŇň1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~!@#$%^&*()-=_+{}[";
+	return chars.charAt(Math.floor(Math.random() * chars.length) + 1)
+}
+
+function magicTextGen(element) {
+  var msg = element.textContent;
+	var length = msg.length;
+
+	setInterval(() => {
+    var newMsg = "";
+    for (i = 0; i <= length; i++) {
+      newMsg += getRandomChar(msg.charAt(i));
+    }
+    element.textContent = newMsg;
+
+  }, 30)
+}
+
+function renderMagicText() {
+	document.querySelectorAll('.magic-text').forEach( (e) => {
+		magicTextGen(e);
+	})
+}
+renderMagicText();
+
+// Magic Text </>

docs/text.html

@@ -240,7 +240,7 @@ <h2 class="title">Other Styles</h2>
     </tr>
     <tr>
       <td>§k</td>
-      <td>magic</td>
+      <td>magic&nbsp;<span class="magic-text" style="position: absolute;">test</span></td>
       <td>obfuscated</td>
     </tr>
     <tr>
@@ -255,7 +255,7 @@ <h2 class="title">Other Styles</h2>
     </tr>
     <tr>
       <td>§n</td>
-      <td style="text-decoration: line-under">underlined</td>
+      <td style="text-decoration: underline">underlined</td>
       <td>underline, u</td>
     </tr>
     <tr>
@@ -318,7 +318,7 @@ <h2 class="title">Other Styles</h2>
     For link, parameter must be either http or https url if you want clients
     to recognize it. For others, it can be any text you'd like (you can make
     player run invalid commands if you wish).
-  </p>
+</p>
   <h2 class="title">Text and Variables</h2>
   <p class="subtitle">
     Variable names are text, but obviously formatting that text does no