IDE - codesandbox.
Live Preview : https://lhowr.csb.app/
Icons Resources are from -> https://ionicons.com/ Fonts are from -> https://fonts.google.com/
understanding:
:root is the pseudo class in CSS and It represent the root element. In HTML, :root represent or html selector
z-index represent the orders of element which is overlapping by its value
pseudo elements is the keyword added to the selector that let style specific part of element(s). ::after/::before create pseudo element that is last/first child of selected element.