/* css/json-formatter.css */

#input-json-jf,
#output-json-jf {
    min-height: 250px;
    /* Ensure a good default height */
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    /* Monospace for JSON data */
    font-size: 0.9rem;
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Responsive adjustments if needed beyond Tailwind's grid */
@media (max-width: 768px) {

    /* md breakpoint */
    .grid.md\:grid-cols-2 {
        /* Target the main grid for input/output */
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }

    #input-json-jf,
    #output-json-jf {
        height: 200px;
        /* Adjust height for stacked view */
        margin-bottom: 1rem;
        /* Add space below input when stacked */
    }

    .flex.md\:flex-row {
        /* Target the options/buttons row */
        flex-direction: column;
    }
}

@media (max-width: 640px) {

    /* sm breakpoint */
    h1 {
        font-size: 1.8rem;
    }
}