.animatetitle{
width:max-content;
overflow:hidden;
white-space:nowrap;
border-right:3px solid #e91e63;

animation:
typing 4s steps(20) infinite,
blink .6s infinite;
}

@keyframes typing{
0%{width:0;}
50%{width:100%;}
100%{width:0;}
}

@keyframes blink{
50%{
border-color:transparent;
}
}

.animationbigtitle{
animation: floatTitle 3s ease-in-out infinite;
}

@keyframes floatTitle{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0px);
}
}


.banner-title span{
display:inline-block;
animation:wave 1.5s infinite;
}

.banner-title span:nth-child(2){animation-delay:.1s;}
.banner-title span:nth-child(3){animation-delay:.2s;}
.banner-title span:nth-child(4){animation-delay:.3s;}

@keyframes wave{
0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}
}

.shineeffect{
position:relative;
display:inline-block;
overflow:hidden;
}

.shineeffect::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.7),
transparent
);

animation:shineMove 2.5s linear infinite;
}

@keyframes shineMove{
100%{
left:120%;
}
}


.jump-title{
display:inline-block;
animation:bounceJump 1.8s infinite;
}

@keyframes bounceJump{

0%,100%{
transform:translateY(0);
}

20%{
transform:translateY(-25px);
}

40%{
transform:translateY(0);
}

60%{
transform:translateY(-12px);
}

}


.running-title{
animation: floatTitle 3s ease-in-out infinite;
}

@keyframes floatTitle{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0px);
}
}