(FIXED)I can't get my code for a loading sreen to work, HELPP

I've been trying to get this code to work for ages. Nothing is helping.

Please tell me what I'm doing wrong and how to fix it.

Here is the code:

<style>

@keyframes loading {

 0% {opacity: 1;}

 50% {opacity: 1;}

 100% {opacity: 0;}

}

body:before {

 content: " ";

 height: 100vh;

 width: 100vw;

 display: block;

 position: fixed;

 top: 0;

 left: 0;

 z-index: 99999;

 backgroung image: url("https://media.tenor.com/PPXvHwXGsVYAAAAM/baguerer-vt.gif");

 background-size:cover;

 background-repeat: no-repeat;

 backgroung-position: center;

 animation: loading 3s ease 0s 1 normal forwards;

 pointer-events: none;

 pointer-events: none;

 filter: grayscale(100%);

}

</style>