:root{
--s:
-1
;
--color
1:
#D6A2E8
;
--color
2:
#82589F
;
}
.text-effect{
color
:
transparent
;
font-family
:
"Rowdies"
,
sans-serif
;
font-size
:
100px
;
font-weight
:
500
;
text-align
:
center
;
letter-spacing
:
2px
;
overflow
:
hidden
;
position
:
relative
;
}
.text-effect:before{
content
:
attr
(data-content);
width
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
text-shadow
:
0
0
0
var(--color
1
),
0
calc(var(--s,
1
) *
1.2em
)
0
var(--color
1
);
animation: animate
1
s infinite;
}
@keyframes animate{
80%
,
100%
{
text-shadow
:
0
calc(var(--s,
1
) *
-1.2em
)
0
var(--color
2
),
0
0
0
var(--color
2
); }
}
@media only
screen
and (
max-width
:
990px
){
.text-effect{
font-size
:
70px
; }
}
@media only
screen
and (
max-width
:
767px
){
.text-effect{
font-size
:
60px
; }
}
@media only
screen
and (
max-width
:
576px
){
.text-effect{
font-size
:
40px
; }
}