Profile card component

• Even though it was quite a straightforward design to accomplish, it definitely helped me understand the different ways to position and image on top of other elements.

After trying absolute position, I came to the conclusion that setting a negative margin-top on the image was the approach that required less lines of code, which is something I like to think of for every design.

This approach does have a minor flaw that I couldn't figure out why - if you zoom your browser on the image you'll see that some of the background pattern shines through the profile photo's border - how would you tackle this?

• One thing that I haven't quite understood yet is that the body background color and card background pattern have different color shades depending on the browser, even though I used an HSL color provided by the challenge.

For example, on Google Chrome it has a very teal-ish accent, whereas in Firefox it's leaning towards a light-blue - do you think this is a normal occurence or an oversight in my code?