Advice Please-Custom Codes Look different in webflow and codepen, and different in different browser

Community resources General
1

Hi everyone,

I used a codepen project and customized the codes for webflow.
The html is directly put inside webflow, css and js are through JSdlivr CDN.

However, this is how it looks in CodePen:

Screenshot 2023-07-09 at 1.09.17 pm
Screenshot 2023-07-09 at 1.09.17 pm1920×1241 154 KB

This is how it looks in Webflow published site (Chrome)

Screenshot 2023-07-09 at 1.09.41 pm
Screenshot 2023-07-09 at 1.09.41 pm1920×1241 130 KB

This is how it looks in Webflow published site (Safari)

Screenshot 2023-07-09 at 1.09.32 pm
Screenshot 2023-07-09 at 1.09.32 pm1920×1241 126 KB

Links:
CodePen Project
Webflow Published Site

Looking for experts to provide some advice, why they all look different :sweat_smile:
Thank you guys!