music: wip music page

static/style.css

@@ -133,6 +133,7 @@ table {
 
 /* Animations */
 
+
 @keyframes fadeInNOut {
   0% {
     opacity: 0;
@@ -196,6 +197,11 @@ table {
   }
 }
 
+@font-face {
+  font-family: "AH";
+  src: url("assets/fonts/ah.ttf") format("truetype");
+}
+
 
 :root {
   --lavender: #cdb4db;
@@ -211,10 +217,11 @@ table {
 
 ::selection {
   text-shadow: 0px 0px 3px var(--darkerer-pink);
-
 }
 
 
+
+
 body {
   background-size: cover;
   background-position: center;
@@ -239,6 +246,10 @@ body {
     background-image: url(assets/images/tiledbgpink.webp);
   }
 
+  &:has(#content about) {
+    background-image: url(assets/gifs/flowerzdark.png);
+  }
+
   main {
     padding-top: 8rem;
   }
@@ -256,7 +267,7 @@ body {
 
   cute-container {
     background-image: url(assets/gifs/weirdstone.png);
-    width: min(90svw, 850px);
+    width: min(90svw, 1000px);
     min-height: 70svh;
     height: auto;
     border: 5px solid var(--lavender);
@@ -494,6 +505,10 @@ home-content {
           gap: 2rem;
         }
 
+        bibou-message {
+          font-style: italic;
+          color: var(--grey-500)
+        }
 
         bibou-container {
           position: relative;
@@ -654,10 +669,40 @@ home-content {
 music {
 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
+
+  vertical-marquee {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100svh;
+    width: 100svw;
+    overflow: hidden;
+    z-index: -1;
+    pointer-events: none;
+    font-size: 10rem;
+    animation: fadeInNOut 10s infinite;
+
+    vertical-marquee-inner {
+      position: absolute;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+
+      text {
+        display: block;
+        font-family: "AH", sans-serif;
+        font-size: 1.1rem;
+        line-height: 24px;
+        color: red;
+        opacity: 0.5;
+      }
+    }
+  }
+
 
   box {
     border-radius: 0.4rem;
@@ -941,8 +986,11 @@ mini-player {
     pink-statusbar {
       display: none;
     }
+
   }
 
+  /* Music page */
+
   /* Miniplayer */
 
   mini-player {