Effect stuck on first section

So I've used this https://www.youtube.com/watch?v=kySGqoU7X-s&t=46s idea for my portfolio webpage, but i cant make it to be on the whole page. It's stuck on the first section, after I've added some content in its div to avoid that. I want it to behave the same when someone is scrolling on my page, and by that i mean that the "blob" and the "blur" effect remains on the page even at the bottom not only and the top.

Does anyone know why it isnt?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const blob = document.getElementById("blob");
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
window.onpointermove = event => {
const {
clientX,
clientY
} = event;
blob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, {
duration: 3000,
fill: "forwards"
});
};
let interval = null;
document.querySelector("h1").onmouseover = e => {
let iterations = 0;
interval = setInterval(() => {
e.target.innerText = e.target.innerText.split("")
.map((letter, index) => {
if (index < iterations) {
return e.target.dataset.value[index];
}
return letters[Math.floor(Math.random() * 26)]
})
.join("");
if (iterations >= e.target.dataset.value.length) {
clearInterval(iterations);
}
iterations += 1 / 4;
}, 30);
}

<!-- language: lang-css -->

body {
background-color: black;
height: 100%;
width: 100%;
margin: 0rem;
--scrollbar-width: 0.4rem;
--light-color: aquamarine;
--dark-color: mediumpurple;
}
html {
scroll-behavior: smooth;
}
@keyframes rotate {
from {
rotate: 0deg;
}
50% {
scale: 1 1.5;
}
to {
rotate: 360deg;
}
}
#blob {
background-color: white;
height: 34vmax;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, aquamarine, mediumpurple);
animation: rotate 20s infinite;
opacity: 0.8;
}
#blur {
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
backdrop-filter: blur(12vmax);
}
h1 {
font-family: 'Space Mono', monospace;
font-size: clamp(3rem, 10vw, 10rem);
color: white;
padding: 0rem clamp(1rem, 2vw, 3rem);
border-radius: clamp(0.4rem, 0.75vw, 1rem);
margin: 0rem;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
z-index: 4;
}
h2 {
font-family: 'Space Mono', monospace;
font-size: clamp(1rem, 5vw, 5rem);
color: aquamarine;
padding: 0rem clamp(1rem, 2vw, 3rem);
border-radius: clamp(0.4rem, 0.75vw, 1rem);
margin: 0rem;
position: absolute;
left: 50%;
top: 63%;
translate: -50% -50%;
z-index: 4;
}
li,
a,
button {
font-family: 'Space Mono', monospace;
font-weight: 500;
font-size: 16px;
color: #ecf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
width: 80%;
top: 0;
left: 0;
z-index: 2;
backdrop-filter: blur(12vmax);
background-color: transparent;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.logo {
cursor: pointer;
order: 3;
margin-left: auto;
height: 50px;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
font-family: 'Space Mono', monospace;
}
.nav_links li a:hover {
color: aquamarine;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: mediumaquamarine;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: 'Space Mono', monospace;
}
button:hover {
background-color: var(--dark-color);
}
::-webkit-scrollbar {
width: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
background: var(--dark-color);
}
::-webkit-scrollbar-thumb {
background: var(--light-color);
}
h3 {
color: var(--light-color);
font-family: 'Space Mono', monospace;
font-size: clamp(0.5rem, 2vw, 2rem);
padding: 0rem clamp(1rem, 2vw, 3rem);
}
.spacer {
margin: 10vh 0;
height: 1px;
}
.section {
position: absolute;
background-color: transparent;
z-index: 4;
top: 100%;
scroll-behavior: smooth;
transition: 0.5s;
}
.about {
display: flex;
gap: 2rem;
color: white;
font-family: 'Space Mono', monospace;
}
.about p {
width: 30%;
align-items: center;
text-align: center;
}
.section-header {
position: absolute;
left: 50%;
translate: -50% -50%;
}
.highlight {
color: var(--light-color);
}
th {
color: var(--light-color);
font-family: 'Space Mono', monospace;
}
tr td {
color: white;
font-family: 'Space Mono', monospace;
}
table {
width: 45%;
text-align: center;
}
.socials-images img {
height: 60px;
background-color: var(--light-color);
}
.socials-images li {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.socials-images p {
font-family: 'Space Mono', monospace;
font-size: larger;
}

<!-- language: lang-html -->

<!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">
<title>Zsolt Pál | FRONTEND</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/logo.png" />
</head>
<body>
<div id="blob"></div>
<div id="blur">
<header>
<img class="logo" src="images/logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li><a href="#about">About me</li>
<li><a href="#projects">Projects</li>
<li><a href="#socials">Socials</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</header>
<div class="container">
<h1 data-value="FRONTEND">FRONTEND</h1>
<h2>Zsolt Pál</h2>
</div>
<div class="spacer"></div>
<div class="section">
<div class="spacer"></div>
<div class="about">
<div class="section-header">
<h3 id="about">About Me</h3>
<div class="spacer"></div>
</div>
<p>In High school there wasn't any programming or developing teaching for me, so I've decided to take matter in my own hands. After a few weeks I've instantly fell in love with <span class="highlight">front-end</span> developing.</p>
<p>Being able to create and modify <span class="highlight">webpages</span> and <span class="highlight">web applicitations</span> are are a huge interest in my life since then. I'm always looking up for new <span class="highlight">methods</span> and
<span class="highlight">creative ideas</span>.</p>
<p>Currently I am looking for a <span class="highlight">Junior</span> or a <span class="highlight">Trainee</span> job.</p>
</div>
<div class="spacer"></div>
<div class="projects">
<div class="section-header">
<h3 id="projects">Projects</h3>
</div>
<div class="spacer"></div>
<table>
<tr>
<th>
These are the projects that I've been envolved in.
</th>
<th>
Some information about them.
</th>
</tr>
<tr>
<td><span class="hightlight">Name</span></td>
<td><span class="hightlight">Function</span></td>
</tr>
<tr>
<td>Wiki about Cars</td>
<td>Basically you are able to search for any car and make at this website, and it gives you back a bunch of information about the searched car.</td>
</tr>
</table>
</div>
<div class="spacer"></div>
<div class="socials">
<div class="section-header">
<h3 id="socials">Socials</h3>
</div>
<div class="spacer"></div>
<div class="socials-images">
<ul>
<li class="social-image"><img src="images/twitter.png" alt="twitter">
<p><a href="https://twitter.com/palimadarxd">Twitter</a></p>
</li>
<li class="social-image"><img src="images/instagram.png" alt="instagram">
<p><a href="https://www.instagram.com/zsota02/?hl=en">Instagram</a></p>
</li>
<li class="social-image"><img src="images/github.png" alt="github">
<p><a href="https://github.com/zsoltp2">Github</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

<!-- end snippet -->