Logic or script error

I have a problem with my code. I want categories to be visible when the screen is vertical. And that if I click on it the list (id = “lista”) appears as a vertical list with a black background. But the list doesn’t disappear if I have the screen vertically. Anyone know how to solve it?

type or paste code here
JAVASCRIPT 
let image1 = document.getElementById("cert1");
let image2 = document.getElementById("cert2");
let image3 = document.getElementById("cert3");
let h31 = document.getElementById("h31");
let h32 = document.getElementById("h32");
let h33 = document.getElementById("h33");

image1.style.display = "none";
image2.style.display = "none";
image3.style.display = "none";

function show1() {
  if (image1.style.display === "none") {
    image1.style.display = "block";
  }
  else {
    image1.style.display = "none";
  }
}

function show2() {
  if (image2.style.display === "none") {
    image2.style.display = "block";
  }
  else {
    image2.style.display = "none";
  }
}

function show3() {
  if (image3.style.display === "none") {
    image3.style.display = "block";
  }
  else {
    image3.style.display = "none";
  }
}

h31.addEventListener('click', show1);
h32.addEventListener('click', show2);
h33.addEventListener('click', show3);

//TASTO CATEGORIE
let tasto = document.getElementById("categorie");
let lista = document.getElementById("lista");

lista.style.visibility = "hidden"; 

function showList() {
  if (lista.style.visibility === "hidden") { 
    lista.style.visibility = "visible"; 
  }
  else if (lista.style.visibility === "visible") {
    lista.style.visibility = "hidden"; 
  }
}

tasto.addEventListener('click', showList);

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portfolio di Samuele Mandolla</title>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="logo">Samuele Mandolla</div>
            <nav class="nav-links">
                <p id="categorie">Categorie</p>
                <div id="lista">
                    <a href="#" id="link">Home</a>
                    <a href="certificati.html" id="link">Certificati</a>
                    <a href="progetti.html" id="link">Progetti</a>    
                </div>
            </nav>
        </header>

        <div class="container">
            <section id="home">
                <h1>Web Developer</h1>
                <p>Benvenuto nel mio portfolio! Mi occupo sviluppo web e mi specializzo nel creare esperienze utente coinvolgenti.</p>
            </section>
        </div>
        <script src="script.js" defer></script>
    </body>
</html>

CSS
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #faebd7;
}

header {
  background-color: #000000;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
  font-size: 24px;
}
  
.nav-links a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  border-bottom: 1px solid transparent;
  transition-property: border-bottom;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.nav-links a:hover {
    border-bottom: 1px solid white;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  float: left;
}

img {
  max-width: 450px;
  height: auto;
  margin-bottom: 20px;
}

.certificato {
  padding-left: 20px;
  border-bottom: 1px solid black;
}

.certificato h3:hover {
  cursor: pointer;
}

.progetti {
  padding-left: 40px;
  margin-left: 10px;
  border-left: 1px solid black;
}

.progetti p {
  padding-left: 10px;
}

.progetti a {
  padding-left: 20px;
  text-decoration: none;
}

#certificati {
  padding-left: 40px;
  margin-left: 10px;
  border-left: 1px solid black;
}

@media only screen and (orientation: landscape) {
  #categorie {
    display: none;
  }
}

@media only screen and (orientation: portrait) {
  #categorie {
    display: block;
    cursor: pointer;
  }
  #lista {
    background-color: black;
  }
}

Add display properties for #lista to the media queries.