//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:

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

<!-- language: lang-css -->
     .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 {
            width: 100%;
            text-align: center;
            position: absolute;
            margin-top: 10%;
        }
  

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

    <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>

<!-- end snippet -->