Resulta que tengo:
<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>
Quiero que me quede así, pero más abajo, es decir, más cerca de las lineas.
Y tengo ordenado cada renglón en una posición específica por el diseño, pero quiero mover un poco todo hacia abajo con un margin-top y sólo me cambia el renglón de arriba (row-1). ¿Cómo puedo hacer para que esos tres renglones se comporten como un sólo elemento?
El css es:
.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;
position: absolute;
top: 147px;
left: 51%;
}
#row-1 {
font-size: 57px;
}
#row-3 {
position: absolute;
top: 166px;
left: 42%;
z-index: -1;
}
Si pongo:
.section-home {
margin-top: 100px;
}