I don't know how wide the page is. window.matchMedia("(min-width: 800px)") is not working. :^(

This should be green, with a black border and black text, if we are correctly ignoring @media rules that do not apply.

This should be green, with a black border and black text, if we are correctly applying @media screen.

This should be green, with a black border and black text, if the window is at least 400px wide.

This should be green, with a black border and black text, if the window is at most 1000px wide.

This should be green, with a black border and black text, if the window is between 400px and 1000px wide.

This should be green, with a black border and black text, if we detected the color feature.

This should be green, with a black border and black text, if we detected the color feature and we understand not.

This should be green, with a black border and black text, if we detected the color feature and a deeply nested query: (color) or ((color) and ((color) or (color) or (not (color)))).