.template:before{background-image:linear-gradient(90deg,red,orange,yellow,green,#099,blue,indigo,violet)}
#persp{
  margin-top:0
}
.tpl{
  font-family:Pirata,bn,hi,hy,ja,ka,km,ko,ml,my,sans-serif
}
.tpl:before,.tpl p:before,.tpl p:after{
  display:none
}
.tpl p span{
  display:inline-block
}
.tpl p span:before{
  text-shadow:var(--3DshadowA5)
}
.tpl p span:after{
  filter:url(#lightA3)
}

.char1:before,.char1:after{content:"S"}
.char1{color:red;font-size:2em}
.char9{color:red;top:-.26em}
.char2:before,.char2:after{content:"U"}
.char2,.char10{color:orange;top:-.3em}
.char3:before,.char3:after{content:"R"}
.char3,.char11{color:gold;top:-.4em;z-index:1}
.char4:before,.char4:after{content:"P"}
.char4,.char12{color:green;top:-.5em}
.char5:before,.char5:after{content:"R"}
.char5,.char13{color:#099;top:-.5em}
.char6:before,.char6:after{content:"I"}
.char6,.char14{color:blue;top:-.45em}
.char7:before,.char7:after{content:"S"}
.char7,.char15{color:indigo;top:-.4em}
.char8:before,.char8:after{content:"E"}
.char8,.char16{color:violet;top:-.3em}

.tpl p span:nth-child(odd){transform:rotateZ(10deg)}
.tpl p span:nth-child(even){transform:rotateZ(-4deg)}

[class^=char]{animation:4s infinite linear}
.template:hover .char1{animation-name:rotate;animation-delay:0s}
.template:hover .char2{animation-name:rotate;animation-delay:-.2s}
.template:hover .char3{animation-name:rotate;animation-delay:-.4s}
.template:hover .char4{animation-name:rotate;animation-delay:-.6s}
.template:hover .char5{animation-name:rotate;animation-delay:-.8s}
.template:hover .char6{animation-name:rotate;animation-delay:-1s}
.template:hover .char7{animation-name:rotate;animation-delay:-1.2s}
.template:hover .char8{animation-name:rotate;animation-delay:-1.4s}
.template:hover .char9{animation-name:rotate;animation-delay:-1.6s}
.template:hover .char10{animation-name:rotate;animation-delay:-1.8s}
.template:hover .char11{animation-name:rotate;animation-delay:-2s}
.template:hover .char12{animation-name:rotate;animation-delay:-2.2s}
.template:hover .char13{animation-name:rotate;animation-delay:-2.4s}
.template:hover .char14{animation-name:rotate;animation-delay:-2.6s}
@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}
#dropbox:after{content:"L E T T E R I N G\a hover"}