body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.card {
    border-radius: 15px;
    box-shadow: none; /* Remove shadows to make it look more native */
}

.form-control,
.btn {
    border-radius: 0;
    height: 44px; /* Increase control and button size for easier mobile touch */
    width: 100%; /* Full-width inputs for mobile */
}

#copyButton {
    border-radius: 0;
}

.btn:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
}

h4 {
    color: #6c757d;
    font-size: 1rem;
}

#output {
    background-color: white;
    overflow: auto;
    resize: none;
    width: 100%; /* Full-width for output text area */
}

/* Responsive Styles */
@media (max-width: 576px) {
    .container {
        padding: 0; /* Remove padding for smaller screens */
    }

    .card {
        border-radius: 0; /* Full width cards on smaller screens */
    }

    h1 {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    h2 {
        font-size: 1.3rem; /* Adjust font size for smaller screens */
    }

    h4 {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }
}