1 files changed, 55 insertions, 0 deletions
diff --git a/src/components/Flashcard/cards.css b/src/components/Flashcard/cards.css
index 2f75ad6..2d80051 100644
--- a/src/components/Flashcard/cards.css
+++ b/src/components/Flashcard/cards.css
@@ -20,6 +20,61 @@ body {
   transform: rotateY(180deg);
 }
 
+/* Flashcard styles */
+.flashcard-container {
+  perspective: 1000px;
+  width: 100%;
+  max-width: 600px;
+  height: 400px;
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+.flashcard {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  border-radius: 0.5rem;
+}
+
+.flipped .flashcard {
+  transform: rotateY(180deg);
+}
+
+.flashcard-front,
+.flashcard-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.flashcard-front {
+  z-index: 2;
+}
+
+.flashcard-back {
+  transform: rotateY(180deg);
+}
+
+/* Card hover effect */
+.flashcard-container:hover .flashcard {
+  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .flashcard-container {
+    height: 350px;
+  }
+}
+
 /* Slide animations */
 @keyframes slide-in-right {
   from {