do soundfile stuff on load, when the audio is ready

index.html

@@ -90,7 +90,7 @@
 
 
 <script>
-window.addEventListener('DOMContentLoaded', function() {
+window.addEventListener('load', function() {
   let link = document.getElementById('soundlink');
   let miku = document.getElementById('miku');
 

style.css

@@ -11,15 +11,33 @@ body {
         hsl(195deg, 100%, 67%),
         hsl(155deg, 70%,  62%)
       );
-  --bg-image:
-    image-set(url(media/bg.png)    1x,
-              url(media/bg_2x.png) 2x);
   --size: 1.75rem;
   --weight: 600;
 
   background:
-    var(--bg-image) top center fixed,
-    var(--gradient) fixed;
+    -webkit-image-set(url(media/bg.png)    1x,
+                      url(media/bg_2x.png) 2x)
+      top center fixed,
+    linear-gradient(135deg,
+        hsl(42deg,  92%,  70%),
+        hsl(348deg, 92%,  70%),
+        hsl(334deg, 100%, 80%),
+        hsl(234deg, 100%, 76%),
+        hsl(195deg, 100%, 67%),
+        hsl(155deg, 70%,  62%)
+      ) fixed;
+  background:
+    image-set(url(media/bg.png)    1x,
+              url(media/bg_2x.png) 2x)
+      top center fixed,
+    linear-gradient(135deg,
+        hsl(42deg,  92%,  70%),
+        hsl(348deg, 92%,  70%),
+        hsl(334deg, 100%, 80%),
+        hsl(234deg, 100%, 76%),
+        hsl(195deg, 100%, 67%),
+        hsl(155deg, 70%,  62%)
+      ) fixed;
   background-blend-mode: overlay;
 
   font-family: 'Muller';
@@ -241,9 +259,31 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
           hsl(195deg, 60%, 44%),
           hsl(155deg, 60%, 55%)
         );
-    --bg-image:
+
+    background:
+      -webkit-image-set(url(media/bg_dim.png)    1x,
+                        url(media/bg_2x_dim.png) 2x)
+        top center fixed,
+      linear-gradient(135deg,
+          hsl(42deg,  56%, 55%),
+          hsl(348deg, 56%, 55%),
+          hsl(334deg, 60%, 43%),
+          hsl(234deg, 60%, 40%),
+          hsl(195deg, 60%, 44%),
+          hsl(155deg, 60%, 55%)
+        ) fixed;
+    background:
       image-set(url(media/bg_dim.png)    1x,
-                url(media/bg_2x_dim.png) 2x);
+                url(media/bg_2x_dim.png) 2x)
+        top center fixed,
+      linear-gradient(135deg,
+          hsl(42deg,  56%, 55%),
+          hsl(348deg, 56%, 55%),
+          hsl(334deg, 60%, 43%),
+          hsl(234deg, 60%, 40%),
+          hsl(195deg, 60%, 44%),
+          hsl(155deg, 60%, 55%)
+        ) fixed;
   }
 
   main {