B
e
s
t
j
Q
u
e
r
y
.text-effect{
color: #f0f0f0;
font-family: 'Oswald', sans-serif;
font-size: 100px;
font-weight: 700;
letter-spacing: 2px;
text-align: center;
-webkit-text-stroke: 0.025em #020202;
-moz-text-stroke: 0.025em #020202;
text-stroke: 0.025em #020202;
transform-origin: center bottom;
position: relative;
}
.text-effect span{ display: inline-block; }
.text-effect span:before,
.text-effect span:after{
content: attr(data-content);
color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: -10px;
left: 10px;
z-index: -1;
}
.text-effect span:after{
top: -20px;
left: 20px;
z-index: -2;
}
.text-effect:nth-child(2n+1) span{ animation: odd 3s cubic-bezier(0.87, 0, 0.13, 1) infinite; }
@keyframes odd{
100%, 0%{ transform: rotate(35deg); }
50% { transform: rotate(-35deg); }
}
@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; }
}