Improved UI and added animations

- Added gradient background to header
- Improved search bar and type filter styles
- Added loading animation
- Added fade-in animation to modal
- Added scaling animation to Pokemon Cards

style.css

@@ -1,28 +1,96 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+
+body {
+    font-family: 'Press Start 2P', cursive;
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+/* Search Bar Styles */
+#search {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+#search:focus {
+    border-color: #F472B6;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
+}
+
+/* Type Filter Styles */
+.type-filter {
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.type-filter:hover {
+    transform: scale(1.05);
+    border-color: rgba(0,0,0,0.1);
+}
+
+/* General Transitions and Hover Effects */
+.pokemon-card {
+    transition: all 0.3s ease;
+    transform-style: preserve-3d;
+}
+
+.pokemon-card:hover {
+    transform: translateY(-5px) rotateY(5deg);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+.pokemon-card-inner {
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.pokemon-card:hover .pokemon-card-inner {
+    transform: rotateY(10deg);
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+.floating {
+    animation: float 3s ease-in-out infinite;
+}
+
+.pokemon-sprite {
+    transition: transform 0.3s;
+}
+
+.pokemon-sprite:hover {
+    transform: scale(1.1);
+}
+
+/* Type Color Definitions */
+.type-bug { background-color: #A8B820; }
+.type-dark { background-color: #705848; }
+.type-dragon { background-color: #7038F8; }
+.type-electric { background-color: #F8D030; }
+.type-fairy { background-color: #EE99AC; }
+.type-fighting { background-color: #C03028; }
+.type-fire { background-color: #F08030; }
+.type-flying { background-color: #A890F0; }
+.type-ghost { background-color: #705898; }
+.type-grass { background-color: #78C850; }
+.type-ground { background-color: #E0C068; }
+.type-ice { background-color: #98D8D8; }
+.type-normal { background-color: #A8A878; }
+.type-poison { background-color: #A040A0; }
+.type-psychic { background-color: #F85888; }
+.type-rock { background-color: #B8A038; }
+.type-steel { background-color: #B8B8D0; }
+.type-water { background-color: #6890F0; }
+
+
+/* Modal Fade-in Animation */
+#pokemon-modal {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}