.text-effect{
color: #121212;
font-family: 'Do Hyeon', sans-serif;
font-size: 100px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
-webkit-text-stroke: 2px gray;
-moz-text-stroke: 2px gray;
text-stroke: 2px gray;
}
.text-effect span{
display: inline-block;
animation: hover 1s linear infinite;
}
.text-effect span:nth-child(2){ animation-delay: 0.125s; }
.text-effect span:nth-child(3){ animation-delay: 0.25s; }
.text-effect span:nth-child(4){ animation-delay: 0.375s; }
.text-effect span:nth-child(5){ animation-delay: 0.5s; }
.text-effect span:nth-child(6){ animation-delay: 0.675s; }
.text-effect span:nth-child(7){ animation-delay: 0.75s; }
.text-effect span:nth-child(8){ animation-delay: 0.125s; }
.text-effect span:nth-child(9){ animation-delay: 0.25s; }
.text-effect span:nth-child(10){ animation-delay: 0.375s; }
@keyframes hover {
0% {
color: #121212;
transform: scale(.5);
-webkit-text-stroke: 2px gray;
}
20% {
color: pink;
transform: scale(1);
-webkit-text-stroke: 3px red;
filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 3px red)drop-shadow(0 0 5px red)hue-rotate(10turn);
}
50% {
color: #121212;
transform: scale(.5);
-webkit-text-stroke: 2px gray;
}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 45px; }
}