Pourquoi mon menu de hamburgers n'apparaît-il pas sur mon téléphone ?-Questions et réponses sur le réseau chinois PHP

Sur mon téléphone, je peux cliquer là où il devrait être et un menu déroulant apparaît, mais pour une raison quelconque, le hamburger lui-même n'est pas visible. Lorsque je consulte le site en vue mobile sur un ordinateur, il est visible, donc je suis confus. J'ai cherché partout où il pourrait être caché, mais je n'ai rien vu. Toute aide est grandement appréciée. Le lien du site est le suivant :

https://chassis.site/

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', () => {
        //toggle nav
        nav.classList.toggle('nav-active');
    
        //animate links
        navLinks.forEach((link, index) => {
            if(link.style.animation){
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease fowards ${index / 7 + 1}s`;
            }
        });
        //burger animation
        burger.classList.toggle('toggle');
    });


}

navSlide();

//sparkle
let index = 0,
    interval = 1000;

const rand = (min, max) => 
  Math.floor(Math.random() * (max - min + 1)) + min;

const animate = star => {
  star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
  star.style.setProperty("--star-top", `${rand(-40, 80)}%`);

  star.style.animation = "none";
  star.offsetHeight;
  star.style.animation = "";
}

for(const star of document.getElementsByClassName("magic-star")) {
  setTimeout(() => {
    animate(star);
    
    setInterval(() => animate(star), 1000);
  }, index++ * (interval / 3))
}

@import url('css.css');
:root {  
  --purple: rgb(123, 31, 162);
  --violet: rgb(103, 58, 183);
  --pink: rgb(244, 143, 177);
  --white: rgb(190, 190, 190);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  background: #0a0a0a;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display:inline-flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(10, 10, 10, 0.5), rgba(0, 0, 0, 0.5)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px),
    url('../images/37P86Mcp.png');
  background-size: auto;
  background-position: center;
  z-index: 1;
}
/*--------------------------------------lines*/
hr.left {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
hr.right {
  display: block;
  width: 30%;
  height: 1px;
  border: 0;
  border-top: 2px solid rgb(190, 190, 190);
  margin: 3em 0;
  padding: 0;
}
/*--------------------------------------lines*/
/*--------------------------------------nav bar*/
nav{
  display: flex;
  position: fixed;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Fugaz One', cursive;
}
.nav-links{
  display: flex;
  justify-content: space-around;
  width: 50%;
}
.nav-links li{
  list-style: none;
}
.nav-links a{
  color: rgb(190, 190, 190);
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 20px;
}
.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 30px;
  height: 3px;
  background-color: rgb(190, 190, 190);
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1230px){
  .nav-links{
    width: 70%;
  }
}
@media screen and (max-width: 854px){
  body{
    overflow-x: hidden;
  }
  .nav-links{
    position: absolute;
    right: 0px;
    height: 30vh;
    width: 15em;
    top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s ease-in;
  }
  .burger{
    display: block;
    padding: 0px 80px 0px 500px;
  }
  hr.left{
    height: 0px;
    width: 0%;
  }
  hr.right{
    height: 0px;
    width: 0%;
  }
}
.nav-active{
  transform: translateX(0%);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1{
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px, -6px);
}
/*--------------------------------------nav bar*/
/*--------------------------------------sparkle*/
  @keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
  }
  
  @keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
  }
  
  h1 {
    color: white;
    font-family: "Rubik", sans-serif;
    font-size: clamp(2em, 2vw, 4em);
    font-weight: 400;
    margin: 0px;
    padding: 20px;
    text-align: center;
  }
  
  h1 > .magic {
    display: inline-block;
    position: relative;
  }
  
  h1 > .magic > .magic-star {
    --size: clamp(20px, 1.5vw, 30px);
    
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }
  
  h1 > .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }
  
  h1 > .magic > .magic-star > svg > path {
    fill: var(--white);
  }
  
  h1 > .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    font-size: 64px;
  }
/*--------------------------------------sparkle*/

<!DOCTYPE html>
<html onclick="play()" lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatibale" content="ie-edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
    <audio src="media/music.mp3"></audio>
    <title>chassis.site</title>
      <style type="text/css">
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
      </style>
  </head>
  <body>
    <!-- nav-->
      <nav>
        <hr class="left"/>
        <ul class="nav-links">
          <li><a href="https://chassis.site/">Home</a></li>
          <li><a href="/subdomains/services.html">Services</a></li>
          <li><a href="https://e.rip/chassis/" target="_blank">Bio Page</a></li>
          <li><a href="/subdomains/projects.html/">Projects</a></li>
        </ul>
        <hr class="right"/>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    <!-- nav-->
     <audio id="audio" loop>
        <source src="media/music.mp3" type="audio/mp3">
     </audio>
    <div id="app">
      <div class="text">
        <h1>
          <span class="magic">
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-star">
              <svg viewBox="0 0 512 512">
              <path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
              </svg>
            </span>
            <span class="magic-text">chassis.site</span>
          </span>
        </h1>
      </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/music.js"></script>
    <script>/*music*/
        var audio = document.getElementById("audio");
        audio.volume = 0.1;
    </script>
    <script>/*music*/
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
  </body>
</html>