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

body{
    width: 100%; height: 100vh; display: flex; align-items: center; 
    justify-content: center; background: #343F4F;
}

.wrapper{
    display: flex; align-items: center;
}

.static-text{
    font-size: 52px; color: #fff; font-weight: 400;
}

.dynamic-text{
    margin-left: 15px; overflow: hidden; line-height: 90px;
    height: 90px; 
}

.dynamic-text li{
    position: relative;
    text-decoration: none; list-style: none; font-size: 52px; font-weight: 500;
    color: #FC6D6D; animation: slide 12s steps(4) infinite;
}

.dynamic-text li span{
    position: relative; 
}

.dynamic-text li span::after{
    position: absolute; content: ''; height: 100%; color: #FC6D6D; width: 100%;
    border-left: 2px solid #FC6D6D; left: 0; 
    animation: typing 3s steps(10) infinite;
    background: #343F4F;
}

@keyframes typing{
    40%, 60%{
        left: 100%;
    }
    100%{
        left: 0;
    }
}

@keyframes slide{
    100%{
        transform: translateY(-350px);
    }
}