music: wip music page

static/style.css

@@ -240,6 +240,14 @@ body {
     display: inline-block;
     animation: marquee 8s linear infinite;
   }
+
+  cute-container {
+    background-image: url(assets/images/tiledbgpink.webp);
+    width: 70svw;
+    height: 70svh;
+    border: 5px solid var(--darker-pink);
+    padding: 1rem 2rem;
+  }
 }
 
 /* CRT Effect */
@@ -623,23 +631,40 @@ home-content {
 
 /* Music */
 music {
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
   video-bg {
     position: fixed;
     top: 0;
     left: 0;
-    height: 100lvh;
-    width: 100lvw;
+    height: 100%;
+    width: 100%;
     z-index: -1;
 
     video {
-      height: 100lvh;
-      width: 100lvw;
+      height: 100%;
+      width: 100%;
       object-fit: cover;
     }
   }
 
   box {
+    border-radius: 0.4rem;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     background-color: white;
+    padding: 1rem;
+  }
+
+  >cute-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
   }
 }
 

templates/partials/music.html

@@ -5,7 +5,7 @@
     </video>
   </video-bg>
 
-  <box>
-    <p>Salut</p>
-  </box>
+  <cute-container>
+    <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
+  </cute-container>
 </music>