Scrollbar styling doesn't work on Safari/Firefox

Hello people

I need some help with styling the scrollbar on Safari and Firefox.

At the end I want the scrollbar to act as an overlay instead of taking space from the body.

My custom code works perfectly in Chrome and Microsoft Edge, but not in Safari and Firefox

@supports(overflow: overlay) {
	*::-webkit-scrollbar {
    display: block;
    width: 16px;
  }
  
	body {
    overflow: overlay;
  }
  
  *::-webkit-scrollbar-track {
    background: #00000000;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #00000000;
    border: 5px solid transparent;
    border-radius: 24px;
    box-shadow: 4px 0px 0px 4px #00000040 inset;
  }
}

Does someone know how to get this working for all browsers?


Link to the published site: https://christmas-calendar.webflow.io/
Here is my site Read-Only: LINK
(how to share your site Read-Only link)