@font-face {
  font-family: 'Cera';
  font-style:normal; 
  src: url('FONTSPRINGDEMO-CeraRoundProLightRegular.woff');
  font-weight: normal;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cera;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
position:relative
}
.wrapper .static{
color: #fff;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic li{
list-style: none;
background: #FC466B;
background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);
background: linear-gradient(to right, #3F5EFB, #FC466B);
-webkit-background-clip: text;
-webkit-text-fill-color: #455df5;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
animation-delay: 1s;
}
@keyframes slide {
100%{
  top: -360px;
}
}
.dynamic li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid rgba(214, 6, 6, 0.715);
padding-bottom:5px;
animation: typing 3s steps(10) infinite,
blink 750ms steps(45) infinite;
animation-delay:1s
}

.welc{
position:absolute;
display: flex;
justify-self: center;
align-items: center;
text-align: center;
transform:translate(70px, 90px);
font-size: 15px; 
color:rgba(179, 173, 173, 0.5);
animation:fadeInUp 2s ease-in;
font-family:sans-serif;
}

@keyframes typing {
40%, 60%{
  left: calc(100% + 10px);
}
100%{
  left: 0;
}
}

@keyframes blink {
to {
  border-right-color: transparent;
}
}

@keyframes fadeInUp {
from{
  opacity: 0;
}

to {
  opacity: 1;
  transform: translateY(90);
}
}


/*@media (max-width:500px){
.static{
  font-size:10px;
}
}*/