Why is @media all screen visibility:hidden not working, while @media only screen does work?

I am making a challenge on FCC and I came across a weird thing that the

visibility: hidden

doesn't want to work when I use the @media query as @media all screen, but when I set the media query to @media only screen the

visibility: hidden

property works like a charm.

Beneath is the code snippet for the HTML and CSS, please check it out and feel free to open on Codepen as well.

Codepen

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

* {
  font-family: 'Roboto Mono', monospace;
  box-sizing: border-box;
}

#main-doc {
  margin-left: 300px;
}

nav {
  position: fixed;
  float: left;
  top: 0;
  left: 0;
  margin: 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;  
  border: 2px solid grey;  
  background-color: #999;
  padding: 0px 45px 0px 45px;
  justify-content: center;
  align-items: center;
 
}

#navbar > header {
  padding: 35px 0px 35px 0px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: wheat;
  width: calc(100% + 90px);
  text-align: center;
  flex-grow: 0;
}

#navbar > ul {
  flex-grow: 2;
  padding-left: 0;
}

li {
  list-style: none;
}

#list > li {  
  padding: 25px 5px 25px 5px;
}

#list > li::before {
  content: "_"; /*space doesn't count as character*/
  visibility: hidden;
}

#list > li:hover::before {
  content: "#"; /*space doesn't count as character*/
  visibility: visible;
  background-color: wheat;
}

#list > li:hover {
  background-color: wheat;
}

.nav-link {
  text-decoration: none;
  color: black;
}

#main-doc {
  display: block;
}

.main-section > header::before {
  content: "_"; /*space doesn't count as character*/
  visibility: hidden;
}

.main-section > header:hover::before {
  content: "#"; /*space doesn't count as character*/
  visibility: visible;
}

.main-section > header {
  font-weight: 700;
  font-size: 24px;
  background-color: wheat;
  padding: 15px 15px 15px 15px;
}

img {
  width: 100%; 
  height: 200px; 
  display: inline;
}

code {
  font-family: monospace;
  background-color: #000;
  color: #4ec;
}

@media only screen and (max-width: 940px){
  nav{
    visibility:hidden;
  }
  #main-doc {
    margin: 0;
  }
}

<nav id="navbar">
    <header>HTML Documentation</header>
  <ul id="list">
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#base_elements" class="nav-link">Base elements</a></li>
    <li><a href="#semantics" class="nav-link">Semantics</a></li>
    <li><a href="#forms" class="nav-link">Forms</a></li>
    <li><a href="#lists" class="nav-link">Lists</a></li>
    <li><a href="#tables" class="nav-link">Tables</a></li></ul>
</nav>
    
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>
    <p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.</p>
    <p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
    <p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements".</p>
    <img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png" alt="Anatomy of an HTML element">
      <p>Image Source: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">MDN</a></p>
<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture.</p>
    </article>
  </section>
  <section class="main-section" id="base_elements">
    <header>Base elements</header>
    <article>
    <p>There are 6 base elements within the HTML code, which are the following:</p>
    <ol>
      <li>html</li>
      <li>head</li>
      <ol>
        <li>meta</li>
        <li>link</li>
        <li>script</li>
      </ol>
      <li>body</li>
      </ol>
    <p>These tags form the basic layout of a simple webpage, in the order of appearance in the list above.</p>
    <p><code>html</code> - is the <strong>root element</strong></p>
    </article>
  </section>
  <section class="main-section" id="semantics"><header>Semantics</header>
    </section>
  <section class="main-section" id="forms"><header>Forms</header></section>
  <section class="main-section" id="lists"><header>Lists</header></section>
  <section class="main-section" id="tables"><header>Tables</header></section>
</main>

Solution

@media all screen {} is syntactically invalid.

@media all, screen {} is valid. (The screen in there is redundant.)

@media only screen {} is valid and could be even alternatively written as @media screen {}

It's because only (and not) are logical operators you put before media query and separate it with space. only is implied, when used explicitly it must be followed by a media type.

(There is and operator for refining media query and , (comma) operator for separating media queries.)

all and screen are media types. all is implied when not used explicitly. Media query can be refined by media features chained with and joiner. Multiple media queries are separated with commas.

/* these should be more or less equivalent: */
@media all {}
@media only all {}
@media screen, print, speech {}
@media only screen, only print, only speech {}
@media not some_unknown_media_type {}
@media only all and (min-width: 0) {}
@media not some_unknown_media_type and (min-width: 0) {}

(Currently it is not possible to use not for media feature, only for explicit media type. Then it negates only that media type, not entire refined query.)