style.css

*{
    box-sizing: border-box;
    font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

body{
    margin: 30px;
    padding: 10px;
    
}

h1{
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
}

p {
    padding: 10px;
}


#text_container {
    padding: 0px;
    float: left;
}


input{
    width: 100%; /* Make it fill the available width */
    min-height: 40px; /* Minimum height */
    max-width: 75ch; /* Maximum width */
    resize: vertical; /* Allow vertical resizing */
    border: 1px solid #ccc; /* Add a border for clarity */
    border-radius: 5px;
    padding: 5px; /* Add padding for readability */
    font-size: 16px; /* Adjust font size as needed */
    line-height: 1.5; /* Line height for readability */
}

textarea{
    width: 100%; /* Make it fill the available width */
    min-height: 40px; /* Minimum height */
    max-width: 75ch; /* Maximum width */
    resize: vertical; /* Allow vertical resizing */
    border: 1px solid #ccc; /* Add a border for clarity */
    border-radius: 5px;
    padding: 5px; /* Add padding for readability */
    font-size: 16px; /* Adjust font size as needed */
    line-height: 1.5; /* Line height for readability */
    display: block;
    margin-top: 40px;
}

/* Style for the buttons */
button {
    /* background-color: #007BFF; Background color */
    color: #fff; /* Text color */
    border: none; /* Remove border */
    border-radius: 5px;
    padding: 8px 12px; /* Add padding */
    margin: 10px; /* Add spacing between buttons */
    cursor: pointer; /* Show pointer cursor on hover */
}