styles.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form {
  width: 95vw;
  height: 95vh;
  max-width: 800px;
}

.textbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80%;
}

.textbox {
  width: auto;
  padding: 10px;
  font-size: 5vh;
  resize: none;
  border: none;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none; /* Add vendor prefix for Safari on iPadOS 12 */
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
}

button {
  margin: 0 10px;
  padding: 10px 20px; /* Add padding for better button appearance */
  font-size: 18px; /* Add font size for better button appearance */
  border: none;
  border-radius: 4px; /* Add border radius for rounded corners */
  background-color: #007bff; /* Add background color */
  color: #fff; /* Add text color */
  cursor: pointer;
  -webkit-appearance: none; /* Add vendor prefix for Safari on iPadOS 12 */
}

button:hover {
  background-color: #0056b3; /* Add hover background color */
}