Update static/test.css

static/test.css

@@ -61,19 +61,16 @@ main {
 
 /* Card Container */
 .cards {
-display: flex;
+    display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2rem;
-    width: 100%;
-    max-width: 1200px; /* Prevents cards from getting too wide on large screens */
-    z-index: 10; 
+    margin-bottom: 3rem;
+    animation: fadeInUp 1s ease-in-out;
 }
 
 /* Card Style */
 .card {
-   cursor: pointer;
- /* display: flex;*/
     background: #2c3e50; /* New modern color */
     padding: 2rem;
     border-radius: 1.5rem;
@@ -84,7 +81,6 @@ display: flex;
     cursor: pointer;
     border: 1px solid #34495e; /* Soft border for definition */
     transform: scale(1); /* Initial scale */
-   position: relative;
 }
 
 .card:hover {
@@ -99,32 +95,18 @@ display: flex;
     margin-bottom: 1rem;
     color: #f39c12; /* Modern accent color */
 }
-.hidden {
-    display: none;
-}
+
 /* Tool Section Styles */
 .tool-section {
+    display: none;
     width: 100%;
-    max-width: 800px; /* Wider than cards for better hierarchy */
-    background: rgba(30, 41, 59, 0.9);
+    max-width: 600px;
+    background: #1e293b;
     padding: 2rem;
     border-radius: 1rem;
     box-shadow: 0 10px 20px rgba(0,0,0,0.2);
-    margin: 0 auto; /* Center the section */
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    transition: 
-        opacity 0.3s ease,
-        height 0.3s ease,
-        padding 0.3s ease;
-}
-.tool-section.active {
-    opacity: 1;
-    height: auto;
-    padding: 2rem;
-    margin-bottom: 2rem; /* Space below the section */
-    animation: fadeInUp 0.5s ease-out;
+    margin-bottom: 2rem;
+    animation: fadeIn 0.5s ease-in-out;
 }
 
 /* Input and Textarea Styles */
@@ -176,22 +158,4 @@ footer {
 @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
-}
-
- .details {
-      display: none; /* Hide by default */
-      margin-top: 10px;
-      transition: all 0.3s ease;
-    }
-
-    .details.open {
-      display: block; /* Make visible when open */
-    }
-
-/* Active Card Styling */
-.card.active {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
-    border: 2px solid #3b82f6;
-    background: #34495e;
-}
+}