All solutions

Although not a complicated challenge, I did do a lot of research into the best practices for laying out a single component so it fills the entire viewport without causing scrolling. My reason for this was primarily to find a resolution for the vh unit issue within Safari on mobile (footer being hidden by the menu bar). I tried many different things all of which are represented in my commits. I'd love to hear any feedback on this as I was not able to come up with a true solution. In addition, I adjusted the design to accommodate for landscape orientation and would appreciate any insight on the code I wrote for this layout. Thanks so much!!!

Well I have to admit....I had to look over some previous solutions to figure out those background circles!! I knew I wanted to place them in ::before and ::after pseudo-elements, but because they were so large it was so challenging to get them placed properly. I'm hoping folks can review my code a bit and let me know if there's anywhere that I can make my code more DRY. Also, I used the Figma design which was very helpful but it doesn't seem to really "match up" well with regards to margins and paddings. Is that normal? How do you accommodate for that when moving the design to the actual code? Thanks!!