/* /mnt/data/flashcard_app/style.css */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

#flashcard-container {
    perspective: 1000px;
    width: 95%; /* Use most of the screen width */
    max-width: 600px; /* Maximum width for larger screens */
    height: 80%; /* Use most of the screen height */
    max-height: 400px; /* Maximum height for larger screens */
    margin: 2% auto; /* Centering and providing some margin */
}

#flashcard {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out; /* Smooth out the transition for moving back */
    cursor: pointer;
}

.card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px; /* Ensure content doesn't touch the edges */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    font-size: 1.5rem; /* Larger text for better readability */
}

.front {
    background: #f9f9f9;
    transform: rotateY(0deg); /* Added */
}

.back {
    background: #ddd;
    transform: rotateY(180deg); /* Added */
}


#flashcard.flipped {
    transform: rotateY(180deg);
}

@media (orientation: portrait) {
    .card-side {
        font-size: 2rem; /* Slightly larger text for portrait mode */
    }
}