Changing Typing Effects/style.css
*{
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
}
ul li{list-style: none;}
body{
    /*to center the items*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #39CCCC;
    font-weight: bold;
}
.wrapper{
    font-size: 4vw;
    width: 50vw;
    text-align: center;
    display: flex;
    
}
.normal-text{
    color: white;
    width: 35%;
    display: inline-block;
    text-align: left;
}
.dynamic-text {
    display: inline-block;
    height: 4vw;
    overflow: hidden;
}
.dynamic-text li{
    color: orange;
    margin: 0 0 2% 5px;
    position: relative;
    width: fit-content;
    animation: slid 18s steps(3) infinite;
    -webkit-animation: slid 18s steps(3) infinite;
}
.dynamic-text li::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-left: 2px solid orange;
    left: 0;
    background: #39CCCC;
    animation: typing 3s steps(12) infinite;
    -webkit-animation: typing 3s steps(12) infinite;
}
@keyframes typing {
    50%{left:100%}
    100%{left:0%}
}
@keyframes slid {
   
     50%{
         transform: translateY(calc(-15.5vw));
         -webkit-transform: translateY(calc(-15.5vw));
         -moz-transform: translateY(calc(-15.5vw));
         -ms-transform: translateY(calc(-15.5vw));
         -o-transform: translateY(calc(-15.5vw));
}
     100%{ transform: translateY(0px);
         -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px); 
          -ms-transform: translateY(0px); 
          -o-transform: translateY(0px);}
}
