Links CSS shape overlap

HTML-CSS
1

I am working on by FCC Personal Portfolio page and am trying to create custom shapes to wrap my contact links. I am using CSS similar to the curriculum used to create a heart. My shapes however overlap the text in the primary shape. I am trying to use z-index to bring the primary box forward and the text inside it however that doesn’t seem to be working. Here is the link to my codepen.

FCC: Personal Portfolio

Thank you for any help.

2

Try to use negative values to your contact-block:after, contact-block:before z-index.
Your can read more about z-index MDN Articel: Using z-index.

3

Excellent.

Thank you!

4

You’re welcome.
Happy coding.