How to get SVG filters to work on Firefox as well?

I used an SVG filter to make the top line glow in my CSS animation. It does work perfectly fine on Chrome but not in Firefox. I read that Firefox has a different way to read SVG filters so I might need to add a bit more code specifically for Firefox. I've tried several things but none of them worked though. Any ideas on how I can accomplish this?

Thank you to everyone in advance.

body {
  background-color: black;
  height: 100vh;
}

.a1 {
  filter: url(#filter1);
  animation: stroke_fill1 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill1 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(0, 255, 216);
    stroke-dashoffset: 0;
  }
}

.b1 {
  animation: stroke_fill2 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(149, 149, 149);
    stroke-dashoffset: 0;
  }
}

<body>

  <svg width="500px" height="400px" viewBox="75.000 80.7 350.769 80.092">

<defs>
       <filter id="filter1" y="-40%" height="180%">
<feGaussianBlur in="offOut" stdDeviation="5.5" result="blurOut"/>
           <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

    </filter>
</defs>

  <path class="a1" stroke="#00E6CF" d=" M 151.5 255.5 L 448.5 255.5 C 455.399 255.5 461 261.101 461 268 L 461 268 C 461 274.899 455.399 280.5 448.5 280.5 L 151.5 280.5 C 144.601 280.5 139 274.899 139 268 L 139 268 C 139 261.101 144.601 255.5 151.5 255.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" filter="url(#filter1)" />

  <path class="b1" stroke="rgb(149, 149, 149)" d=" M 151.5 319.5 L 448.5 319.5 C 455.399 319.5 461 325.101 461 332 L 461 332 C 461 338.899 455.399 344.5 448.5 344.5 L 151.5 344.5 C 144.601 344.5 139 338.899 139 332 L 139 332 C 139 325.101 144.601 319.5 151.5 319.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" />


</svg>

</body>

Solution

So, thanks to @RobertLongson I reviewed my code and I realised there was useless stuff as well as wrong syntax here and there. Here is the working one. Thank you again.

body {
  background-color: black;
  height: 100vh;
}

.a1 {
  filter: url(#filter1);
  animation: stroke_fill1 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill1 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(0, 255, 216);
    stroke-dashoffset: 0;
  }
}

.b1 {
  animation: stroke_fill2 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(149, 149, 149);
    stroke-dashoffset: 0;
  }
}

<body>

  <svg width="500px" height="400px" viewBox="75.000 80.7 350.769 80.092">

<defs>
   <filter id="filter1" y="-40%" height="180%">
       <feGaussianBlur stdDeviation="5.5" result="blurOut"/>
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>

    </filter>
</defs>

  <path class="a1" stroke="#00E6CF" d=" M 151.5 255.5 L 448.5 255.5 C 455.399 255.5 461 261.101 461 268 L 461 268 C 461 274.899 455.399 280.5 448.5 280.5 L 151.5 280.5 C 144.601 280.5 139 274.899 139 268 L 139 268 C 139 261.101 144.601 255.5 151.5 255.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" filter="url(#filter1)" />

  <path class="b1" stroke="rgb(149, 149, 149)" d=" M 151.5 319.5 L 448.5 319.5 C 455.399 319.5 461 325.101 461 332 L 461 332 C 461 338.899 455.399 344.5 448.5 344.5 L 151.5 344.5 C 144.601 344.5 139 338.899 139 332 L 139 332 C 139 325.101 144.601 319.5 151.5 319.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" />


</svg>

</body>