* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Outfit', sans-serif;*/
    font-family: "Poppins", sans-serif;
    color: #fff;
    /*padding: 10px;*/
}

.txt-animado {
    /*height: 100vh;*/
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #212121;
    color: #fff;
}

body a{
    text-decoration: none;
    color: #fff;
    display: inline-block;
}

.txt-animado{
    font-size: 45px;
    font-weight: 500;
}

.txt-animado span{
    position: relative;

}

/*pseudo elemento 'before' (nao existe)*/
.txt-animado span::before{
    /* before = antes */
    content: "";
    color: #ff007b;
    animation: palavras 20s infinite;/*keyFrameCriado, tempoAnimação, Repetição*/
}

.txt-animado span::after{
    /* after = depois */
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px solid #ff007b;
    right: -10px;
    animation: cursor .8s infinite, digita 20s steps(15) infinite;
    width: calc(100% + 18px);
    background-color: #212121;
}

/*Keyframes cria animações em CSS*/
/*Neste caso do texto, é preciso possuir 100%.
A quant de frases tem que ser dividida entre os 100%*/
@keyframes palavras{
    0%,20%{
        content: "criaremos sua identidade virtual";
    }
    21%,40%{
        content: "criaremos seu catálogo online";
    }
    41%,60%{
        content: "colocamos sua marca para o mundo";
    }
    61%,80%{
        content: "te ajudaremos a evoluir!";
    }
    81%,100%{
        content:"somos a FariaHouse";
    }
}

@keyframes cursor{
    0%{
        border-left: 2px solid #212121;
    }
}

@keyframes digita{
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%,100%{
        width: calc(100% + 18px);
    }
}