.animated-text{
    font-size: 34px;
    font-weight: 600;
    min-width: 280px;
}

.animated-text span{
    position: relative;
}

.animated-text span::before{
    content: "Graphic Designer";
    color: #D8EFD3;
    animation: words 20s infinite;
}

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

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

@keyframes words {
    0%,20%{
        content: "Graphic Designer";
    }
    21%,40%{
        content: "Technician";
    }
    41%,60%{
        content: "Developer";
    }
    61%,80%{
        content: "UI/UX Designer";
    }
    81%,100%{
        content: "Gamer";
    }
}

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