html – Overflow possibly not working when I go back into the website


Good afternoon everyone! I am here with a question I have been trying to solve for the past few days and I would really like your input. Somewhere either in my CSS or html (most likely my CSS), there is something that isn’t letting my website function properly. In the mobile version of the website, I click a link to go to another website but when I return to the website, the overflow glitches and stops working, showing the white background. Is there a possible way to fix this?

Here is the link if you want to test it out yourself (make the tab smaller): https://codeproductions.rezatachi.repl.co/

        Here is my code:
        <!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
                <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap" rel="stylesheet">
                <link href="style.css" rel="stylesheet" type="text/css"/>
                <link rel="icon" href="https://cdn.discordapp.com/attachments/761256129191477261/762134738793136138/ASCENSION_F1.png">
                <title>Code(コード) Productions</title>
                
              </head>
              <body>
               
                
               
              <div class="aboutMe">
               <h2>Welcome.</h2>
               <p class="paragraph">
                 Here you will find all my links and affiliates. I am a cybersecurity major, exploring the world of tech and gradually accumulating coding knowledge and expertise. If you feel the need to contact meet directly, please refer to the 'Contact Me' tab or Instagram. </p>
                 </div>
              <nav>
            <div class="logo">
                <h4>Code Productions.</h4>
            </div>
                <ul class="nav-links">
                  <li>
                    <a href="https://www.instagram.com/its.abrahamb/">Instagram</a>
                    </li>
                  <li>
                    <a href="https://github.com/Rezatachi">Github</a>
                    </li>
                  <li>
                    <a href="https://soundcloud.com/codeproductions">Soundcloud</a>
                    </li>
                  <li>
                      <a href="#">LinkedIn</a>
                    </li>
                    <li>
                      <a href="https://www.youtube.com/user/AbeMinecraftGaming/featured?view_as=subscriber">Youtube</a>
                    </li>
                </ul>
                <div class="burger">
                  <div class="line1"></div>
                  <div class="line2"></div>
                  <div class="line3"></div>
                </div>
                <script src="https://codereview.stackexchange.com/app.js"></script>
            </nav>
             <div class="contact-form">
                      <h1>Contact Me</h1>
                      <div class="inputBox">
                      <label>Name :</label>
                      <input type="text" name="value" placeholder="">
                      </div>
                      <div class="inputBox">
                      <label>Email :</label>
                       <input type="email" name="value" placeholder="">
                      </div>
                      <div class="inputBox">
                        <label>Phone Number :</label>
                        <input type="text" name="value" placeholder="">
                      </div>
                      <div class="inputBox">
                        <label>Type Your Message :</label>
                       <textarea>
                       </textarea>
                      </div>
                      <a class="btn">Submit        
                         </a>
             </div> 
              </body>
             <div class= "bgimage1">
             <img src="https://cdn.discordapp.com/attachments/761256129191477261/762134738793136138/ASCENSION_F1.png" style=" width: 400px;
              height: 400px;border-radius: 50%;"></div>
            <div class="bgfront"></div>
            </html>
    
    Here is the CSS
    *{
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
        }
          
        .contact-form{
          width: 85%;
          max-width: 780px;
           background-color: #521917;
           position: absolute;
           top: 250%;
           left: 12%;
           font-family: 'Sawarabi Gothic', sans-serif;
            color: white;
          text-transform: uppercase;
          letter-spacing: 5px;
          font-size: 16px;
          padding: 30px 40px;
          box-sizing: border-box;
          border-radius: 10px;
          text-align: center;
          box-shadow: 0 0 20px #000000b2;
          font-weight: 100;
        }
    
        .contact-form h1{
          margin-top: 0;
          font-weight: bold;
        }
        .inputBox{
          border: .5px solid white;
          margin: 8px 0;
          border-radius: 10px;
          padding: 5px 6px;
        }
        .inputBox label{
          display: block;
          text-align: left;
        }
        .inputBox input,.inputBox textarea{
          width: 100%;
          border: none;
          outline: none;
          background: none;
          margin-top: 6px;
          color: white;
          padding: 2px;
        }
    
        .btn {
          display: block;
          background: #fff;
          color: black;
          padding: 12px;
          border-radius: 10px;
        
        }
        .btn:hover{
          transition: .5s ease;
          color: gray;
        }
    
      
        
        
        nav{
          display: flex;
          justify-content: space-around;
          align-items: center;
          min-height: 10vh;
          font-family: 'Sawarabi Gothic', sans-serif;
          background-color: #521917;
          
          
        }
        
        
        .logo {
          color: white;
          text-transform: uppercase;
          letter-spacing: 5px;
          font-size: 16px;
        }
        
        .nav-links{
           display: flex;
          justify-content: space-around;
          width: 40%;
           transition: 4s;
        }
        
        .nav-links li{
          list-style:none;
        }
        
        .nav-links:hover {
          text-shadow:-6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
        }
        
        .nav-links a{
          color: white;
          text-transform: uppercase;
          letter-spacing: 5px;
          text-decoration: none;
          font-weight: bold;
          font-size: 10px;
          
        }
        
        
        .burger{
          display: none;
          cursor: pointer;
          transition: all 4s ease;
        }
        
        .burger div{
         width: 25px;
         height:3px;
         background-color: white;
         margin: 5px;
         transition: 0.3s ease;
         
        }
        .aboutMe{
           width: 100%;
          max-width: 780px;
           position: absolute;
           top: 30%;
           left: 5%;
           font-family: 'Sawarabi Gothic', sans-serif;
            color: white;
          text-transform: uppercase;
          letter-spacing: 5px;
          font-size: 16px;
          padding: 30px 40px;
          text-align: left;
          font-weight: 100;
          
        }
    
         .bgimage1{
          position: absolute;
         z-index: 2;
          top: 20%;
          left: 60%;
         border-radius: 50%;
          background: url(https://cdn.discordapp.com/attachments/761256129191477261/762134738793136138/ASCENSION_F1.png);
         box-shadow: 0 0 20px #000000b2;
           transition: 1s ease;
         
        }
        .bgimage1:hover{
          transform: scale(1.2);
       
        }
    
        
        @media screen and (max-width:1792px){
            .nav-links{
              width: 60%;
            }
          }
          
        
        @media screen and (max-width:1000px){
          
         html, body {
          overflow-x: hidden;
         }
    
       .nav-links{
         z-index: 1;
            position: absolute;
            right: 0px;
            height: 92vh;
            top: 8vh;
            background-color: #521917;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            transform: translateX(100%);
            transition: transform 0.5s ease-in;
            text-shadow:-6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
          }
        .aboutMe{
           width: 100%;
          max-width: 780px;
           position: absolute;
             top: 78%;
          left: 5%;
           font-family: 'Sawarabi Gothic', sans-serif;
            color: white;
          text-transform: uppercase;
          letter-spacing: 5px;
          font-size: 16px;
          padding: 30px 40px;
          text-align: left;
          font-weight: 100;
          
        }
        
         .bgimage1 {
          position: absolute;
         z-index: auto;
          top: 15%;
          left: 10%;
          background: url(https://cdn.discordapp.com/attachments/761256129191477261/762134738793136138/ASCENSION_F1.png);
         box-shadow: 0 0 20px #000000b2;
          
    
        }
          
         
          .nav-links li{
            opacity: 0;
          }
          .burger{
            display: block;
          }
        }
        .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);
        }
        
      
       
        
        .bgfront {
           z-index: -1 ;
          width: 100%;
          height: 350vh;
          display: flex;
          top: 0;
          left: 0;
          background: url('https://cdn.discordapp.com/attachments/512048916464795658/762088740914462760/view4insa.png') center repeat;
          
          
        }
        
Here is the java script

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