CSS Grid-areas how to make footer sticky without loosing footer grid area?

Question

I am trying to make a Footer sticky. I have asigned three areas in CSS with grid-areas. Header, Main and Footer.

When I apply the code:

 bottom: 0px;
    position: absolute;

I will lose the footer area when I inspect the element in a browser. See below.

Below is my code:

* {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}


/* html -  */

html {
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
  color: white;
}

html body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #df92d2;
  line-height: 1.6;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: " header " " main " " footer ";
}

header {
  grid-area: header;
  background-color: #993a4a;
}

nav {
  width: 100%;
  overflow: hidden;
}

ul {
  list-style-type: none;
  overflow: hidden;
  background-color: #993a4a;
  text-align: right;
}

li {
  display: inline-block;
  padding: 6px;
}

nav ul li a {
  text-decoration: none;
  color: white;
}

main {
  grid-area: main;
  width: 100%;
  background-size: cover;
  position: relative;
}

main img {
  height: 500px;
  width: 100%;
}

footer {
  grid-area: footer;
  background-color: #993a4a;
  text-align: left;
  height: 40px;
  width: 100%;
  bottom: 0px;
  box-sizing: border-box;
  bottom: 0px;
  position: absolute;
}

<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<header>
  <div>SP<span>OO</span>FY</div>
</header>

<main>
  <nav>

    <div>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li> <a href="products.html">Products</a></li>
        <li> <a href="gallery.html">Gallery</a></li>
        <li> <a href="about us.html">About us</a></li>
        <li> <a href="Contact.html">Contact</a></li>
      </ul>
    </div>

  </nav>


  <!-- <img src="Stad.jpg" alt=""> -->
  <h1>Welcome to SPOOFY</h1>

</main>
<footer>

</footer>

To make a long story short. How can I keep my 3 grid areas and have a sticky footer?