Mejorar crossbrowsing de sitio web

Hola comunidad ¿Como están?

Tengo un problema, es que verán soy diseñador y tengo 4 años en el mundo del diseño web, pero solo 2 en el de desarrollar mis propios diseño y aspiro algún día independizarme un poco del desarrollador pero por ahora quiero aprender poco a poco.

Me gusta hacer experimentos con solo css y cuando ya adquirí confianza con boostrap me anime a diseñar mi sitio sin él jejeje http://g3k.co pero no se porque he tenido problemas de crossbrowsing con mozzilla ya que esto no me ha pasado antes, sobre todo con la animación del header donde por alguna razón no funciona el overflow: hidden, entre otras cosas.

No busco la panacea del diseño responsive liquido conn breakpoints flexibes, sino un feel and like más parecido entre lo que se ve en chrome que se ve perfecto y firefox, ojo no busco la igualdad 100% del diseño entre ambos navegadores sino similitud, que me recomiendan, que problemas tengo o cause y como puedo solucionarlos, ah y perdonen tanto tecnicismo es un habito que se me pego entre los desarrolladores con los que he trabajado es para que no me tilden de ignorante pero como ven no es que sepa mucho tampoco .

Sí pueden darme sus feedbacks sería genial. Muchas gracias de antemano.

pd: Noten que no hay nada o casi nada de javascript, por lo que no se mucho sobre este lenguaje más allá de cosas básicas con jquery, sí me sugieren algún script e los agradecería mucho.

Gracias por responder, de verdad muchas gracias.

Pero por fa no lo hagan por privado, quiero que este post le funcione a muchas otras personas y no solo a mi.

En cuanto a sus recomendaciones, ya intente colocar al final de la [@keyframes un display:none y aun sigue apareciendo la barra de desplazamiento en firefox y disminui 2 breakpoint en los mediaqueries por recomendación.

En cuanto a una sugerencia sobre decir y ser más especifico en los problemas que son para mi muy evidentes en el sitio, ahí voy:

1. En el header donde esta la animación, en mozzila no funciona el overflow:hidden cuando la nave termina por salir de la pantalla, esta produce una barra de desplazamiento incomoda en el sitio.
2. El header tiene un position:relative y los png con forma de "glaciares" un position:absolute, para posicionarlos cada uno con un top: 0; left: 0; ect. En chrome se ve como debería, pero en mozzilla parece que el header o es más grande de lo que debería ser o esta incluyendo los margin como el punto de inicio de la caja. No sé como solucionarlo.
3. Las distancias entre los elementos en la sección "mi filosofía" se ven más alejadas unos de otros en safari e internet explorer que lo que deberían, algunos me han dicho o sugerido no usar % en los margenes o no usar los vh y vw, para los tamaños, voy hacer las pruebas pero sí tienen otra idea es bienvenida.
4. El menu desplegable aparece de una vez desplegado en algunos navegadores, esta función lo hice solo con css, por lo que no es una función de js sino un comportamiento de un seudoselector por lo que es muy probable que se deba a que el selector :checked no funcione en estos navegadores, algunos por esta razón me ugieren usar modernizr, pero al parecer no es simplemente coger el js y likearlo en el header para que funcione.
5. Hay una desigualdad en el titulo del header, donde pone: 'G3K' esto se debe a que la tipografía usada crea un error en la altura del line-height, pero en mozzila se ve diferente por unos milímetros, ¿alguna idea de como corregirlo?.
6. En algunos smartphones me dicen que el navegador se cierra después de un tiempo de abierta la página, ya comprobé el peso de la imágenes y solo uso css con la filosofía mobile first por lo que las imágenes que cargan son primero las moviles, por lo que no sé porque se da esto.

También agradezco sus cumplidos (ojala los coloquen en la página incluso si son criticas) pero de verdad, este post no es para lucirme por el diseño (que también es bueno ver eso) porque precisamente sé que aun no esta terminado, no es humildad, aun hay inconsistencias graves por corregir, gracias.