@media min-witdth is being ignored by browser

I've a pair of rules for screens with 768 width. The problem is that on screens bigger than that, the browser takes the wrong rule, applying the one for the older screens.

@keyframes p1
{
    from{
        bottom:0;display:none;opacity:0;
    }
    50% {
        bottom:15;opacity:0.5;
    }
    to{
        bottom:25%;display:block;opacity:1;
    }
}


@media screen and (max-width: 800px) {
    @keyframes p1
    {
        from{
            bottom:0;display:none;opacity:0;
        }
        50% {
            bottom:10;opacity:0.5;
        }
        to{
            bottom:15%;display:block;opacity:1;
        }
    }
}

On bigger screens, the browser takes the max-width rule, ignoring the default.

Check this question, which this is likely a duplicate of, it has a lot of good answers.

This works as expected where a big screen shows the div in blue (default), a medium will show green and on smaller it shows as red.

div {
  background-color: blue;
  height: 30px;
}

@media screen and (max-width: 1200px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 800px) {
  div {
    background-color: red;
  }
}

<div></div>