*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    font-family:Georgia, serif;
}

.contenedor{
    text-align:center;
}

.rosa{
    width:260px;
    height:auto;
}

.tallo,
.hoja{
    fill:none;
    stroke:#2ecc71;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;

    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:dibujar 3s forwards;
}

.hoja1{
    animation-delay:2.2s;
}

.hoja2{
    animation-delay:2.6s;
}

.petalo{
    fill:#ff4f81;
    transform-origin:center;
    transform-box:fill-box;

    opacity:0;
    transform:scale(0);

    animation:florecer .8s forwards;
}

.p1{ animation-delay:3.2s; }
.p2{ animation-delay:3.5s; }
.p3{ animation-delay:3.8s; }
.p4{ animation-delay:4.1s; }

.centro{
    fill:#ffd54f;
    opacity:0;
    animation:aparecer .5s 4.5s forwards;
}

h1{
    margin-top:25px;
    color:white;
    opacity:0;
    animation:aparecer 1s 5s forwards;
}

p{
    color:#d0d0d0;
    margin-top:10px;
    opacity:0;
    animation:aparecer 1s 5.4s forwards;
}

@keyframes dibujar{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes florecer{
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes aparecer{
    to{
        opacity:1;
    }
.ramo{
    width:300px;
    opacity:0;
    transform:scale(0.5);
    animation:aparecerRamo 2s forwards;
}

@keyframes aparecerRamo{
    to{
        opacity:1;
        transform:scale(1);
    }
}