How to make my animated image stay in the same place even when I scroll down the screen?

Question

I have placed an animated image on my landing page however when I scroll down the screen the animated image also moves with the screen, I have put position: fixed but it is still moving, how do I stop it from moving with the screen and keep it in place? the image is called img/jetpack.png found in the HTML.

also if you see any other errors in my code please feel free to let me know, as I would like to improve it as best I could.

Thank you

:root {
  font-size: 16px;
  font-family: 'Open sans';
}

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

body {
  background-color: white;
}

body::-webkit-scrollbar {
  width: 0.8rem;
}

body::-webkit-scrollbar-track {
  background-color: grey;
}

body::-webkit-scrollbar-thumb {
  background-color: #5A36AF;
}

main {
  margin-left: 7rem;
  margin-right: 7rem;
  padding: 1rem;
}


/****** Navbar ******/

.img-logo {
  margin-top: 1rem;
  width: 8rem;
  transition: width 350ms ease;
}

.navbar {
  position: fixed;
  background-color: black;
  transition: width 350ms ease;
}

.fa-brands {
  transition: width 10s ease;
}

.navbar-nav {
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.nav-item {
  margin: 1rem;
}

.nav-item:last-child {
  margin-top: auto;
  ;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 6rem;
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  filter: grayscale(100%) opacity(1);
  transition: var(--transition-speed);
}

.nav-link:hover {
  filter: grayscale(0) opacity(1);
  background: #9461B6;
  color: #EC8355;
  border-radius: 10%;
}

.link-text {
  display: none;
  margin: 1rem;
}

.nav-link svg {
  min-height: 2rem;
  margin: 0 1.5rem;
}

.fa-solid {
  color: white;
}

.fa-brands {
  color: white;
}

.fa-brands,
fa-solid {
  transition: var(--transition-speed);
}

.navbar:hover .fa-solid {
  font-size: 3rem;
}

.navbar:hover .fa-brands {
  font-size: 4rem;
}

p {
  font-size: 30px;
}


/* Landing Page */

body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  width: 100%;
  line-height: 1.4;
  background-image: url(img/portfolio-bg4.png);
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}

.landing {
  max-width: 100%;
  margin: auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95%;
}

.landing-title {
  font-family: 'Roboto Slab', serif;
  ;
  font-size: 7rem;
}

.landing img {
  position: fixed;
  width: 23em;
  right: 18%;
  top: 10%;
  animation: floating ease 10s infinite;
}

@keyframes floating {
  0% {
    transform: translate(10%, 0%);
  }
  25% {
    transform: translate(15%, 10%);
  }
  50% {
    transform: translate(10%, 8%);
  }
  75% {
    transform: translate(15%, 5%);
  }
  100% {
    transform: translate(10%, 0%);
  }
}

.btn {
  cursor: pointer;
  border-radius: 20px;
  margin-top: 2rem 0;
  background-color: black;
  color: orange;
  border: 0;
  font-size: 2rem;
  font-weight: 600;
  padding: 1.5rem 2rem;
  font-family: 'Roboto Slab', serif;
}


/******* About Me ********/

h2 {
  font-family: 'Roboto Slab', serif;
  font-size: 3rem;
  display: flex;
  justify-content: center;
}

.about-me {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border: solid purple;
  border-radius: 10%;
}


/********* smaller screens **********/

@media only screen and (max-width: 600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }
  .logo {
    display: none;
  }
  .navbar-nav {
    flex-direction: row;
  }
  .nav-link {
    justify-content: center;
  }
  main {
    margin: 0;
  }
}


/************ larger screens **********/

@media only screen and (min-width: 600px) {
  .navbar {
    top: 0;
    width: 8rem;
    height: 100vh;
  }
  .navbar:hover {
    width: 16rem;
  }
  .navbar:hover .img-logo {
    width: 16rem;
  }
  .navbar:hover .link-text {
    display: block;
  }
  .fa-brands {
    font-size: 4rem;
    margin: 0rem;
  }
  .fa-solid {
    font-size: 2rem;
    margin: 1rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/283305f487.js" crossorigin="anonymous"></script>
  <title>Omar's Portfolio</title>

  <!----- Navbar ----->

  <div class="navbar">
    <nav>
      <ul class="navbar-nav">

        <li class="logo">
          <img class="img-logo" src="img/Logo-White2.png" alt="My logo">
        </li>

        <li class="nav-item">
          <a href="landing" class="nav-link">
            <i class="fa-solid fa-house"></i>
            <span class="link-text">Home</span>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="fa-solid fa-user"></i>
            <span class="link-text">About Me</span>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="fa-solid fa-screwdriver-wrench"></i>
            <span class="link-text">services</span>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="fa-solid fa-folder-open"></i>
            <span class="link-text">Projects</span>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="fa-solid fa-id-card"></i>
            <span class="link-text">Contact</span>
          </a>

        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="fa-brands fa-github"></i>
            <span class="link-text"></span>
          </a>
        </li>

      </ul>
    </nav>
  </div>
</head>

<body>
  <section class="landing">

    <h1 class="landing-title">Welcome!</h1>
    <Button class="btn">Contact Me</Button>
    <img src="img/jetpack.png" alt="animated jetpack" />

  </section>

  <div>
    <main class="about-me">
      <h2> Get To Know Me</h2>
      <p class="about-me-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>


    </main>
  </div>
</body>

</html>