css homelab improvements

css/sections/homelab.css

@@ -2,16 +2,43 @@
     margin-top: 18px;
     padding: 32px 24px;
     background: rgba(20, 20, 30, 0.10);
-    backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
-    -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
+    backdrop-filter: blur(48px);
+    -webkit-backdrop-filter: blur(48px);
     border-radius: 24px;
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.10);
     min-width: 26rem;
     max-width: 26rem;
     align-self: stretch;
     display: flex;
     flex-direction: column;
     gap: 18px;
+    position: relative;
+    overflow: hidden;
+}
+
+.homelab-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    /* background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460, #000000, #53354a, #800080); */
+    background: linear-gradient(45deg, #1a1a2e44, #0f346066, #000000, #3e085e66, #80008022);
+    background-size: 400% 400%;
+    animation: gradient-animation 50s ease infinite;
+}
+
+@keyframes gradient-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
 .homelab-title {
@@ -31,54 +58,10 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    animation: homelab-gradient-move 24s linear infinite;
+    animation: gradient-animation 25s ease infinite;
 }
 
-@keyframes homelab-gradient-move {
-    0% {
-        background-position: 0% 50%;
-    }
 
-    10% {
-        background-position: 15% 50%;
-    }
-
-    20% {
-        background-position: 30% 50%;
-    }
-
-    30% {
-        background-position: 45% 50%;
-    }
-
-    40% {
-        background-position: 60% 50%;
-    }
-
-    50% {
-        background-position: 75% 50%;
-    }
-
-    60% {
-        background-position: 100% 50%;
-    }
-
-    70% {
-        background-position: 75% 50%;
-    }
-
-    80% {
-        background-position: 45% 50%;
-    }
-
-    90% {
-        background-position: 15% 50%;
-    }
-
-    100% {
-        background-position: 0% 50%;
-    }
-}
 
 .homelab-buttons {
     display: flex;