.text-effect{
color:#fff;
font-family:'Oxygen', sans-serif;
font-size: 70px;
text-align: center;
}
.text-effect span{
line-height: 85px;
width: 90px;
height: 95px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: inline-block;
animation: spin 4s cubic-bezier(.84,.13,.40,.96) infinite alternate;
}
.text-effect span:nth-child(1){ background-color: #dd202d; }
.text-effect span:nth-child(2){ background-color: #6cbb93; }
.text-effect span:nth-child(3){ background-color: #f0d095; }
.text-effect span:nth-child(4){ background-color: #e0e334; }
.text-effect span:nth-child(5){ background-color: #5756a4; }
.text-effect span:nth-child(6){ background-color: #6ac5da; }
.text-effect span:nth-child(7){ background-color: #7abc4a; }
.text-effect span:nth-child(8){ background-color: #dd202d; }
.text-effect span:nth-child(9){ background-color: #6cbb93; }
.text-effect span:nth-child(10){ background-color: #f0d095; }
@keyframes spin{
0% {transform:rotateY(0turn);}
100% {transform:rotateY(7turn);}
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 60px; }
.text-effect span{
line-height: 65px;
height: 75px;
width: 70px;
}
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 50px; }
.text-effect span{ width: 45px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 35px; }
.text-effect span{ width: 35px; }
}