feat: updated styles

Author: Kapil Gowru

fern/assets/styles.css

@@ -1109,11 +1109,75 @@ h1, h2, h3 {
 }
 
 /*** START -- HIGHLIGHTED FRAME STYLING ***/
+@keyframes gradient-animation {
+  0% {
+    background-image:
+      radial-gradient(at 40% 20%, hsla(109,80%,78%,1) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, hsla(222,83%,81%,1) 0px, transparent 50%),
+      radial-gradient(at 0% 50%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 80% 100%, hsla(222,75%,72%,1) 0px, transparent 50%),
+      radial-gradient(at 35% 74%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 85% 14%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 25% 10%, hsla(222,83%,81%,1) 0px, transparent 50%);
+  }
+  25% {
+    background-image:
+      radial-gradient(at 60% 30%, hsla(109,80%,78%,1) 0px, transparent 50%),
+      radial-gradient(at 20% 80%, hsla(222,83%,81%,1) 0px, transparent 50%),
+      radial-gradient(at 10% 60%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 70% 90%, hsla(222,75%,72%,1) 0px, transparent 50%),
+      radial-gradient(at 45% 84%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 75% 24%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 35% 20%, hsla(222,83%,81%,1) 0px, transparent 50%);
+  }
+  50% {
+    background-image:
+      radial-gradient(at 50% 40%, hsla(109,80%,78%,1) 0px, transparent 50%),
+      radial-gradient(at 10% 90%, hsla(222,83%,81%,1) 0px, transparent 50%),
+      radial-gradient(at 20% 40%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 90% 80%, hsla(222,75%,72%,1) 0px, transparent 50%),
+      radial-gradient(at 25% 64%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 95% 34%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 15% 30%, hsla(222,83%,81%,1) 0px, transparent 50%);
+  }
+  75% {
+    background-image:
+      radial-gradient(at 30% 10%, hsla(109,80%,78%,1) 0px, transparent 50%),
+      radial-gradient(at 5% 105%, hsla(222,83%,81%,1) 0px, transparent 50%),
+      radial-gradient(at 5% 45%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 85% 95%, hsla(222,75%,72%,1) 0px, transparent 50%),
+      radial-gradient(at 40% 69%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 80% 19%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 20% 15%, hsla(222,83%,81%,1) 0px, transparent 50%);
+  }
+  100% {
+    background-image:
+      radial-gradient(at 45% 25%, hsla(109,80%,78%,1) 0px, transparent 50%),
+      radial-gradient(at 5% 95%, hsla(222,83%,81%,1) 0px, transparent 50%),
+      radial-gradient(at 15% 55%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 75% 105%, hsla(222,75%,72%,1) 0px, transparent 50%),
+      radial-gradient(at 50% 80%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 90% 20%, hsla(108,91%,90%,1) 0px, transparent 50%),
+      radial-gradient(at 30% 5%, hsla(222,83%,81%,1) 0px, transparent 50%);
+  }
+}
+
 .highlight-frame {
-  background-color: var(--accent-a2);
+  /* background-color: var(--accent-a2); */
+  background-color:hsla(222,58%,66%,1);
+  background-image:
+  radial-gradient(at 40% 20%, hsla(109,80%,78%,1) 0px, transparent 50%),
+  radial-gradient(at 0% 100%, hsla(222,83%,81%,1) 0px, transparent 50%),
+  radial-gradient(at 0% 50%, hsla(108,91%,90%,1) 0px, transparent 50%),
+  radial-gradient(at 80% 100%, hsla(222,75%,72%,1) 0px, transparent 50%),
+  radial-gradient(at 35% 74%, hsla(108,91%,90%,1) 0px, transparent 50%),
+  radial-gradient(at 85% 14%, hsla(108,91%,90%,1) 0px, transparent 50%),
+  radial-gradient(at 25% 10%, hsla(222,83%,81%,1) 0px, transparent 50%);
   border-radius: 0.75rem;
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
+  animation: gradient-animation 15s ease-in-out infinite alternate;
+  background-size: 200% 200%;
 }
 
 .highlight-frame > *:first-child {