body: finished background depending on page, remove video bg

static/style.css

@@ -215,8 +215,8 @@ table {
 
 }
 
+
 body {
-  background-image: url(assets/images/tiledbgpink.webp);
   background-size: cover;
   background-position: center;
   min-height: 100lvh;
@@ -227,15 +227,15 @@ body {
   font-size: 1rem;
 
 
-  :has(#content home-content) {
+  &:has(#content home-content) {
     background-image: url(assets/images/tiledbgpink.webp);
   }
 
-  :has(#content music) {
+  &:has(#content music) {
     background-image: url(assets/images/tiledbgpink.webp);
   }
 
-  :has(#content katcenkat) {
+  &:has(#content katcenkat) {
     background-image: url(assets/images/tiledbgpink.webp);
   }
 
@@ -651,21 +651,6 @@ music {
   justify-content: center;
   align-items: center;
 
-  video-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    z-index: -1;
-
-    video {
-      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);

templates/partials/music.html

@@ -1,10 +1,4 @@
 <music>
-  <video-bg>
-    <video autoplay muted loop playsinline>
-      <source src="/static/assets/videos/music.webm" type="video/mp4" />
-    </video>
-  </video-bg>
-
   <cute-container>
     <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
   </cute-container>