Create style.css

style.css

@@ -0,0 +1,76 @@
+/* styles.css */
+
+.main .block-container {
+    padding: 2rem;
+}
+
+.title {
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+.section-title {
+    margin-top: 2rem;
+    font-size: 1.5rem;
+}
+
+.text-area {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.flashcard-container {
+    display: flex;
+    flex-direction: row; /* Aligns flashcards horizontally */
+    overflow-x: auto; /* Allows horizontal scrolling if necessary */
+    gap: 20px; /* Adds space between flashcards */
+    padding: 1rem;
+}
+
+.flashcard {
+    width: 250px;
+    height: 200px;
+    border: 2px solid #4682b4; /* Steel Blue border */
+    border-radius: 5px;
+    font-size: 16px;
+    color: black;
+    background-color: #f0f8ff; /* Alice Blue background */
+    perspective: 1000px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+
+.flashcard-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.flashcard:hover .flashcard-inner {
+    transform: rotateY(180deg);
+}
+
+.flashcard-front, .flashcard-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.flashcard-front {
+    background-color: #f0f8ff; /* Alice Blue background */
+}
+
+.flashcard-back {
+    background-color: #ffffff; /* White background for the back */
+    transform: rotateY(180deg);
+}