html, body {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Custom CSS for the flip effect */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotateY(0deg); /* Explicitly set default to front */
    transition: transform 0s; /* Instant transition by default */
    transform-style: preserve-3d;
}

/* Add a separate transition for the flip button/click */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
    transition: transform 0.8s; /* Add transition back for the manual flip */
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column; /* Stack number and text vertically */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Add some padding */
    border-radius: 10px; /* Match the parent border-radius */
    box-sizing: border-box; /* Include padding in element's total width and height */
    overflow-wrap: break-word; /* Break long words */
    text-align: center; /* Center text */
}

.flip-card-front {
    background-color: #f1f1f1;
    color: black;
}

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
}

/* Ensure text scales reasonably on smaller screens */
#flashcard-text-front, #flashcard-text-back {
    font-size: 1.5rem;
    line-height: 1.1;
    margin-top: 10px; /* Space between number and text */
    word-break: break-word;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#flashcard-number {
    font-size: 1rem; /* Size for the question number */
    color: #555; /* Slightly muted color */
}

.flip-card-back #flashcard-number {
    color: #ccc; /* Lighter color on the back */
}

@media (max-width: 640px) { /* Adjust for smaller screens */
    #flashcard-text-front, #flashcard-text-back {
        font-size: 1.5rem;
    }
    .flip-card {
        height: 300px; /* Adjust height for smaller screens */
    }
    #flashcard-number {
        font-size: 0.9rem;
    }
}

/* Style for the content page */
#content-page {
    display: none; /* Initially hidden */
    width: 100%;
    max-width: 600px; /* Max width for the list */
    margin-top: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#content-page h2 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 20px;
}

#question-list {
    list-style: none;
    padding: 0;
}

#question-list li {
    background-color: #eee;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#question-list li:hover {
    background-color: #ddd;
}