CSS does not work on firefox

Hi, I added some CSS regarding the cursor on my website. It should be dark on the homepage and white on the lukas-e.de/about page. Works perfectly fine except for firefox. this ist the code:

body, header {
  #magicMouseCursor {
   
    border: 1px solid #54575D!important;
		z-index: 9999;
   
  }
	#magicPointer {
    height: 7px!important;
    width: 7px!important;
    top: 0;
    left: 0;
    position: fixed;
    background: #54575D!important;
    border-radius: 50%;
    pointer-events: none!important;
    transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s;
		z-index: 9999;



    &.is-hover {
      background: red!important;
			z-index: 9999;
    }
  }

  .magic-hover {
    transition: all 0.2s;
		z-index: 9999;

    &:hover {
      cursor: none!important;
    }
  }
}
.page-id-206{
		#magicMouseCursor {
   
    border: 1px solid #fff!important;
			z-index:999!important;
   
  }
	#magicPointer {
    height: 7px!important;
    width: 7px!important;
    top: 0;
    left: 0;
    position: fixed;
    background: #fff!important;
    border-radius: 50%;
    pointer-events: none!important;
    transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s;
		z-index:999!important;



    &.is-hover {
      background: red!important;
			z-index:999!important;
    }
  }
	}

The page I need help with: [log in to see the link]