how set media queries when the viewport is more than 800px

How media query is working? how to set div to 300x300 and red when the viewport is more than 800px: expand it to full screen to watch the problem.

.test{
  width:600px;
  height:600px;
  background-color:grey;
}

@media (max-width: 800px){
  .test{
    width:300px;
    height:300px;
    background-color: red;
  }
}


<div class="test"></div>