Tip Calculator App using HTML, CSS, and JS

I really wanted to add space between the caret and the input text for each of the inputs but I wasn't able to figure out how to do it. I have seen it suggested online to use the letter spacing property. I tried using a pseudo-element to select the first letter in the input and add letter spacing but that didn't seem to work. If you know how to do this let me know!

I found the most time-consuming part of the project to be writing the javascript to manage the input behavior. I wanted to add more specific error messages depending on the state of the input but I decided not to in the interest of saving time.

I'm not sure what the best settings are for the height of the body. I'd like to know how to vertically center the main content in the desktop view. I made the body a flexbox and I set justify-content to center but it still seems like it's sitting high up on the page.

I'd be curious to know what decision other people made about how many characters to allow for each input. I only allowed three characters for the custom tip input, six for the bill input, and four for the number of people input.

I hope you liked this one. Please let me know what improvements could be made.