:root{
--red:#ff0000;
--orange:#ffa500;
--yellow:#ffff00;
--blue: #0000ff;
}
.text-effect{
color:#fff;
font-family: 'Pacifico', cursive;
font-size: 100px;
font-weight: 800;
text-align: center;
text-transform: capitalize;
animation: animate 1s infinite;
}
@keyframes animate{
0% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--red); }
4% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--orange), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--yellow), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--blue), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--red), 25px 25px var(--red); }
8% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--orange), 6px 6px var(--orange), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--yellow), 12px 12px var(--yellow), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--blue), 18px 18px var(--blue), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--red); }
12% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--orange), 5px 5px var(--orange), 6px 6px var(--orange), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--yellow), 11px 11px var(--yellow), 12px 12px var(--yellow), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--blue), 17px 17px var(--blue), 18px 18px var(--blue), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--red); }
16% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--orange), 4px 4px var(--orange), 5px 5px var(--orange), 6px 6px var(--orange), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--yellow), 10px 10px var(--yellow), 11px 11px var(--yellow), 12px 12px var(--yellow), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--blue), 16px 16px var(--blue), 17px 17px var(--blue), 18px 18px var(--blue), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--red); }
20% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--orange), 3px 3px var(--orange), 4px 4px var(--orange), 5px 5px var(--orange), 6px 6px var(--orange), 7px 7px var(--orange), 8px 8px var(--yellow), 9px 9px var(--yellow), 10px 10px var(--yellow), 11px 11px var(--yellow), 12px 12px var(--yellow), 13px 13px var(--yellow), 14px 14px var(--blue), 15px 15px var(--blue), 16px 16px var(--blue), 17px 17px var(--blue), 18px 18px var(--blue), 19px 19px var(--blue), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--red); }
24% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--orange), 3px 3px var(--orange), 4px 4px var(--orange), 5px 5px var(--orange), 6px 6px var(--orange), 7px 7px var(--yellow), 8px 8px var(--yellow), 9px 9px var(--yellow), 10px 10px var(--yellow), 11px 11px var(--yellow), 12px 12px var(--yellow), 13px 13px var(--blue), 14px 14px var(--blue), 15px 15px var(--blue), 16px 16px var(--blue), 17px 17px var(--blue), 18px 18px var(--blue), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--red); }
28% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--orange), 3px 3px var(--orange), 4px 4px var(--orange), 5px 5px var(--orange), 6px 6px var(--yellow), 7px 7px var(--yellow), 8px 8px var(--yellow), 9px 9px var(--yellow), 10px 10px var(--yellow), 11px 11px var(--yellow), 12px 12px var(--blue), 13px 13px var(--blue), 14px 14px var(--blue), 15px 15px var(--blue), 16px 16px var(--blue), 17px 17px var(--blue), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--red), 25px 25px var(--orange); }
32% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--orange), 3px 3px var(--orange), 4px 4px var(--orange), 5px 5px var(--yellow), 6px 6px var(--yellow), 7px 7px var(--yellow), 8px 8px var(--yellow), 9px 9px var(--yellow), 10px 10px var(--yellow), 11px 11px var(--blue), 12px 12px var(--blue), 13px 13px var(--blue), 14px 14px var(--blue), 15px 15px var(--blue), 16px 16px var(--blue), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--red), 24px 24px var(--orange), 25px 25px var(--orange); }
36% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--orange), 3px 3px var(--orange), 4px 4px var(--yellow), 5px 5px var(--yellow), 6px 6px var(--yellow), 7px 7px var(--yellow), 8px 8px var(--yellow), 9px 9px var(--yellow), 10px 10px var(--blue), 11px 11px var(--blue), 12px 12px var(--blue), 13px 13px var(--blue), 14px 14px var(--blue), 15px 15px var(--blue), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--red), 23px 23px var(--orange), 24px 24px var(--orange), 25px 25px var(--orange); }
40% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--orange), 3px 3px var(--yellow), 4px 4px var(--yellow), 5px 5px var(--yellow), 6px 6px var(--yellow), 7px 7px var(--yellow), 8px 8px var(--yellow), 9px 9px var(--blue), 10px 10px var(--blue), 11px 11px var(--blue), 12px 12px var(--blue), 13px 13px var(--blue), 14px 14px var(--blue), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--red), 22px 22px var(--orange), 23px 23px var(--orange), 24px 24px var(--orange), 25px 25px var(--orange); }
44% { text-shadow: 0px 0px transparent, 1px 1px var(--orange), 2px 2px var(--yellow), 3px 3px var(--yellow), 4px 4px var(--yellow), 5px 5px var(--yellow), 6px 6px var(--yellow), 7px 7px var(--yellow), 8px 8px var(--blue), 9px 9px var(--blue), 10px 10px var(--blue), 11px 11px var(--blue), 12px 12px var(--blue), 13px 13px var(--blue), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--red), 21px 21px var(--orange), 22px 22px var(--orange), 23px 23px var(--orange), 24px 24px var(--orange), 25px 25px var(--orange); }
48% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--yellow), 3px 3px var(--yellow), 4px 4px var(--yellow), 5px 5px var(--yellow), 6px 6px var(--yellow), 7px 7px var(--blue), 8px 8px var(--blue), 9px 9px var(--blue), 10px 10px var(--blue), 11px 11px var(--blue), 12px 12px var(--blue), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--red), 20px 20px var(--orange), 21px 21px var(--orange), 22px 22px var(--orange), 23px 23px var(--orange), 24px 24px var(--orange), 25px 25px var(--orange); }
52% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--yellow), 3px 3px var(--yellow), 4px 4px var(--yellow), 5px 5px var(--yellow), 6px 6px var(--blue), 7px 7px var(--blue), 8px 8px var(--blue), 9px 9px var(--blue), 10px 10px var(--blue), 11px 11px var(--blue), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--red), 19px 19px var(--orange), 20px 20px var(--orange), 21px 21px var(--orange), 22px 22px var(--orange), 23px 23px var(--orange), 24px 24px var(--orange), 25px 25px var(--yellow); }
56% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--yellow), 3px 3px var(--yellow), 4px 4px var(--yellow), 5px 5px var(--blue), 6px 6px var(--blue), 7px 7px var(--blue), 8px 8px var(--blue), 9px 9px var(--blue), 10px 10px var(--blue), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--red), 18px 18px var(--orange), 19px 19px var(--orange), 20px 20px var(--orange), 21px 21px var(--orange), 22px 22px var(--orange), 23px 23px var(--orange), 24px 24px var(--yellow), 25px 25px var(--yellow); }
60% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--yellow), 3px 3px var(--yellow), 4px 4px var(--blue), 5px 5px var(--blue), 6px 6px var(--blue), 7px 7px var(--blue), 8px 8px var(--blue), 9px 9px var(--blue), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--red), 17px 17px var(--orange), 18px 18px var(--orange), 19px 19px var(--orange), 20px 20px var(--orange), 21px 21px var(--orange), 22px 22px var(--orange), 23px 23px var(--yellow), 24px 24px var(--yellow), 25px 25px var(--yellow); }
64% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--yellow), 3px 3px var(--blue), 4px 4px var(--blue), 5px 5px var(--blue), 6px 6px var(--blue), 7px 7px var(--blue), 8px 8px var(--blue), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--red), 16px 16px var(--orange), 17px 17px var(--orange), 18px 18px var(--orange), 19px 19px var(--orange), 20px 20px var(--orange), 21px 21px var(--orange), 22px 22px var(--yellow), 23px 23px var(--yellow), 24px 24px var(--yellow), 25px 25px var(--yellow); }
68% { text-shadow: 0px 0px transparent, 1px 1px var(--yellow), 2px 2px var(--blue), 3px 3px var(--blue), 4px 4px var(--blue), 5px 5px var(--blue), 6px 6px var(--blue), 7px 7px var(--blue), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--red), 15px 15px var(--orange), 16px 16px var(--orange), 17px 17px var(--orange), 18px 18px var(--orange), 19px 19px var(--orange), 20px 20px var(--orange), 21px 21px var(--yellow), 22px 22px var(--yellow), 23px 23px var(--yellow), 24px 24px var(--yellow), 25px 25px var(--yellow); }
72% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--blue), 3px 3px var(--blue), 4px 4px var(--blue), 5px 5px var(--blue), 6px 6px var(--blue), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--red), 14px 14px var(--orange), 15px 15px var(--orange), 16px 16px var(--orange), 17px 17px var(--orange), 18px 18px var(--orange), 19px 19px var(--orange), 20px 20px var(--yellow), 21px 21px var(--yellow), 22px 22px var(--yellow), 23px 23px var(--yellow), 24px 24px var(--yellow), 25px 25px var(--yellow); }
76% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--blue), 3px 3px var(--blue), 4px 4px var(--blue), 5px 5px var(--blue), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--red), 13px 13px var(--orange), 14px 14px var(--orange), 15px 15px var(--orange), 16px 16px var(--orange), 17px 17px var(--orange), 18px 18px var(--orange), 19px 19px var(--yellow), 20px 20px var(--yellow), 21px 21px var(--yellow), 22px 22px var(--yellow), 23px 23px var(--yellow), 24px 24px var(--yellow), 25px 25px var(--blue); }
80% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--blue), 3px 3px var(--blue), 4px 4px var(--blue), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--red), 12px 12px var(--orange), 13px 13px var(--orange), 14px 14px var(--orange), 15px 15px var(--orange), 16px 16px var(--orange), 17px 17px var(--orange), 18px 18px var(--yellow), 19px 19px var(--yellow), 20px 20px var(--yellow), 21px 21px var(--yellow), 22px 22px var(--yellow), 23px 23px var(--yellow), 24px 24px var(--blue), 25px 25px var(--blue); }
84% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--blue), 3px 3px var(--blue), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--red), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--orange), 14px 14px var(--orange), 15px 15px var(--orange), 16px 16px var(--orange), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--yellow), 20px 20px var(--yellow), 21px 21px var(--yellow), 22px 22px var(--yellow), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--blue); }
88% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--blue), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--red), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--orange), 14px 14px var(--orange), 15px 15px var(--orange), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--yellow), 20px 20px var(--yellow), 21px 21px var(--yellow), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--blue); }
92% { text-shadow: 0px 0px transparent, 1px 1px var(--blue), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--red), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--orange), 14px 14px var(--orange), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--yellow), 20px 20px var(--yellow), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--blue); }
96% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--red), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--orange), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--yellow), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--blue); }
100% { text-shadow: 0px 0px transparent, 1px 1px var(--red), 2px 2px var(--red), 3px 3px var(--red), 4px 4px var(--red), 5px 5px var(--red), 6px 6px var(--red), 7px 7px var(--orange), 8px 8px var(--orange), 9px 9px var(--orange), 10px 10px var(--orange), 11px 11px var(--orange), 12px 12px var(--orange), 13px 13px var(--yellow), 14px 14px var(--yellow), 15px 15px var(--yellow), 16px 16px var(--yellow), 17px 17px var(--yellow), 18px 18px var(--yellow), 19px 19px var(--blue), 20px 20px var(--blue), 21px 21px var(--blue), 22px 22px var(--blue), 23px 23px var(--blue), 24px 24px var(--blue), 25px 25px var(--red); }
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 90px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 65px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 50px; }
}
@media only screen and (max-width: 479px){
.text-effect{
font-size: 38px;
line-height: 35px;
}
}
