.tpl{font-family:Corben,bn,hi,hy,ja,ka,km,ko,ml,my,cursive}

.tpl:before,.tpl p:before,.tpl p:after{display:none}
.tpl p span{display:inline-block}
.tpl p span:before,.tpl p span:after{padding:0 .05em}

.char1:before,.char1:after{content:'C';color:red}
.char2:before,.char2:after{content:'o';color:orange}
.char3:before,.char3:after{content:'l';color:gold}
.char4:before,.char4:after{content:'o';color:green}
.char5:before,.char5:after{content:'r';color:#099}
.char6:before,.char6:after{content:'f';color:blue}
.char7:before,.char7:after{content:'u';color:indigo}
.char8:before,.char8:after{content:'l';color:violet}
.char9:before,.char9:after{content:'3';color:orange}

.char1:before{background:orange}
.char2:before{background:gold}
.char3:before{background:green}
.char4:before{background:#099}
.char5:before{background:blue}
.char6:before{background:#893ec0}
.char7:before{background:violet;z-index:-1}
.char8:before{background:orange}
.char9:before{background:red}

.tpl,[class^=char]:after{
  filter:url(#lightA2)drop-shadow(4px 4px 2px rgba(0,0,0,.7))
}
*{lighting-color:#fff}
#dropbox:after{content:"L E T T E R I N G"}