Landing page with two columns, responsive design, mobile first

I had some difficulties with the active states for this project, as well as imperfections in some other places :-). For the active states CSS, I have used the input:invalid and input:invalid ~ small selectors, however, the warning message is activated as soon as the user types something (whether the email address format is invalid or not) and not only when they click on the submit button. Any feedback or ideas on how to fix this, it would be much appreciated. Thank you.