flex, position, transform

It's a good job! But I'd like to highlight a few things that might become an issue in the future:

1. Try to avoid using px. It's an absolute unit, so it may cause problems in a responsive design. Instead, you can use responsive units like rem or em. You can read more about this in this article: Why you shouldn't use pixels for font-size.
2. Consider replacing or experimenting with vh and vw when you use them in height and width. It might sound good to display content depending on a screen's height and width; however, it might act unpredictably while the screen size changes. If you open your page in DevTools and play with the screen width, you'll see that the layout acts probably not like you expected it to. Giving a .container property height: 100%; (100% from parent height) and using responsive unit like rem to declare elements size, should solve the problem with changing screen size.

Good