Add metro notification system in JS with styling, fix audio playback before first volume change, change tip.js to export function to register new element with hint.

static/main.css

@@ -184,8 +184,7 @@ aside.metromenu {
     width: 30vw;
     background-color: black;
     height: 100vh;
-    transition: 0.2s;
-    transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.955);
+    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
     padding: 2em;
 }
 
@@ -213,6 +212,28 @@ aside.metromenu #content {
 
 /* Global classes and IDs */
 
+.notificationBox {
+    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
+    width: fit-content;
+    position: fixed;
+    bottom: 2em;
+    left: 0;
+    background-color: black;
+    transform: translateX(-100%);
+    padding: 1em;
+    outline: thin solid var(--theme-color);
+    margin-right: 8em;
+    max-width: 40em;
+}
+
+.notificationBox.shown {
+    transform: none;
+}
+
+.notificationBox h1 {
+    font-size: x-large;
+}
+
 li.inlineList {
     display: inline;
 }