card finished

src/app/globals.css

@@ -29,12 +29,16 @@ body {
   }
 }
 
-/* Update the card flip styles */
+/* Card flip styles */
 .card-container {
   perspective: 1500px;
 }
 
 .card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
   cursor: pointer;
@@ -44,34 +48,15 @@ body {
   transform: rotateY(180deg);
 }
 
-.card-front,
-.card-back {
-  -webkit-backface-visibility: hidden;
+.card-side {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   backface-visibility: hidden;
-  transform-style: preserve-3d;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
-              0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  -webkit-backface-visibility: hidden;
 }
 
+
 .card-back {
   transform: rotateY(180deg);
-}
-
-/* Add a subtle hover effect */
-.card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0)
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.card:hover::before {
-  opacity: 1;
 }