body{
    margin:0;
    padding:0;
    padding-left: 30%;
    background-color: #2f3542;
    height: 50vh;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
}
   
h2{
    color: antiquewhite;
}

h2 strong {
    color: #ff7f50; 
}
animated-text {
    font-size: 10px;
    font-weight: 400;
    min-width: 280px;
}

h3{
    color: #BFBFBF;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
}
.animated-text span{
    position: relative;
}

.animated-text span::before{
    content: "Tecnologia";
    color: #ff7f50;
    animation: words 20s infinite;
}

.animated-text span::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color: #2f3542;
    border-left: 2px solid #ff7f50;
    right: -10px;
    animation: cursor .8s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor {
    to{
        border-left: 2px solid #2f3542;
    }
}

@keyframes words {
    0%,20%{
        content: " Tecnologia"
    }
    21%,40%{
        content: " Treinamentos"
    }
    41%,60%{
        content: " Consultoria"
    }
    61%,80%{
        content: " Produtos"
    }
    81%,100%{
        content: " Serviços"
    }

}

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