Inside my head tag, I have the following script. The min-width:500 is functioning correctly, however the immediate subsequent query for max-width:499px doesn't seem to be working. I've tried with and without screen and, as well as adding it to the styles.css stylesheet but nothing seems to work. This is specifically targeted for my screen and should be operational. Can anyone identify what mistake I might be making?
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
@media screen and (min-width: 500px) {
body{
color:greenyellow;
background-color: black;
}
}
@media screen and (max-width: 499px) {
body {
color:pink;
background-color: navy;
}
}
</style>
<link rel = "stylesheet" href = "styles.css">
Why does my VSCode not recognize mid-width or max-width but accepts it during coding?