//Edit: solo se mueve el row-1
porque a los demás les estás dando una posición absoluta.
Veo que tienes creada una clase en la etiqueta section
, podrías aplicar un margin
a esta etiqueta para poder bajar los items:
.title {
font-family: var(--font-Retro);
text-align: center;
text-shadow: 2px 2px var(--pink-light);
letter-spacing: 0.5px;
font-size: 40px;
margin-top: 50px;
}
.type-1 {
color: var(--pink-retro);
}
.type-2 {
color: white;
font-size: 33px;
top: 147px;
/*position: absolute;*/
left: 51%;
}
#row-1 {
font-size: 57px;
}
#row-3 {
top: 166px;
left: 42%;
z-index: -1;
/*position: absolute;*/
}
.section-home {
margin-topwidth: 20%;
}
.section-home {100%;
text-align: center;
position: absolute;
margin-top: 20px;/*o margin-top: 10%*/10%;
}
}
<html>
<head>
<title>HOLA MUNDO</title>
</head>
<body>
<section class="section-home">
<h1 class="title">
<span class="type-1" id="row-1">Hey, there</span></br>
<span class="type-2" id="row-2">I'm</span></br>
<span class="type-1" id="row-3">María Antonieta</span>
</h1>
</section>
</body>
</html>