/* General responsive adjustments */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
}

/* Make flip-card and editor full-width on smaller screens */
@media only screen and (max-width: 768px) {
    .flip-card,
    .editor {
        width: 100% !important;
        max-width: 100%;
    }
    .flip-card {
        height: auto !important;
    }
}

/* Ensure all direct content is centered */
.flip-card,
.editor {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}