Не появляется текст над изображениями ⇐ Php

[Anonymous]

На самом деле я пишу код для веб-сайта с параллаксом во время написания кода. У меня проблема: текст, добавленный в тег раздела, отображается позади изображений, добавленных ранее в коде, но мне нужно, чтобы он поверх изображений был в моем CSS-коде
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 10px;
}
.container{
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
z-index: -1;
}
.background, .foreground{
position:absolute;
height: 100%;
width:100%;
z-index: -1;
object-fit: cover;

}
.background{
transform: translateZ(-50px) scale(6);
}
.foreground{
transform: translateZ(-30px) scale(4);
}
h1{
position:absolute;
top: 5rem;
left: 50%;
transform: translateX(-50%);
letter-spacing: 4px;
font-size: 10rem;
color: white;
text-shadow: 0 0 10px rgba(0, 0, 0,0.3);
}
section{
background-color: black;
color: white;
padding: 5rem 0;

}