Delian's Chat App CSS Illustration

I have to be honest... I'm very new to the keyframes animations(with heavy empasis on "new") and the fact of using before and after selectors(if I got that right) and also the phone's notch to create the colour columns making them appear with this:

#notch, #before, #after {
  content: "";
}

All in all, it wasn't overwhelming but it definitely wasn't easy. I still feel I made some errors here and there. Any thoughts? And I wanted the page (phone and text )to be animated but I could only get the messages.