Update

Author: Karniverse

bundle.css

@@ -19,7 +19,22 @@
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease-in-out;
-        background: linear-gradient(135deg, #db7fff, #f5d2ed);
+        /* background: linear-gradient(135deg, #db7fff, #f5d2ed); */
+        background-image: linear-gradient(
+            125deg,
+            #ce9ffc,
+            #7367f0,
+            #ff6aa8,
+            #d67676,
+            #ffd26f,
+            #3677ff,
+            #fec163,
+            #de4313,
+            #eece13,
+            #b210ff
+        );
+        background-size: 400% 400%;
+        animation: bganimation 150s infinite;
     }
     .card:hover {
         transform: scale(1.05);
@@ -36,11 +51,23 @@
         border-radius: 0 0 12px 12px;
     }
     .title {
-        font-size: 1.2rem;
+        font-size: 2rem;
         font-weight: bold;
     }
     .description {
-        font-size: 0.9rem;
+        font-size: 1.2rem;
         color: gray;
     }
+
+    @keyframes bganimation {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 1000% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
 </style>

bundle.js

@@ -18,7 +18,7 @@
     });
 </script>
 
-<div>
+<div class="search">
     <input
         type="text"
         id="searchBox"
@@ -29,9 +29,16 @@
 
 <style>
     #searchBox {
-        width: 95%;
-        padding: 10px;
-        margin-bottom: 10px;
-        font-size: 16px;
+        width: 30%;
+        padding: 8px;
+        margin: 6px;
+        font-size: 19px;
+        border: 1px solid #492d2d;
+        border-radius: 5px;
+    }
+    .search {
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 </style>