.template:before{background-color:#111}
#persp{
  display:flex;
  align-items:center;
  width:94%
}
#persp:before,#persp:after{
  content:'';
  height:16px;
  background:#fff;
  border:solid 2px #aaa;
  border-radius:8px;
  flex-grow:1;
  background:linear-gradient(#000 0%,#113e87 22%,#10cccc 50%,#000 51%,#e21ddc 78%,#e21ddc 78%,#fff 100%)
}
#persp:before{position:relative;left:auto;right:aut;top:auto;bottom:auto;margin-right:10px}
#persp:after{margin-left:10px}

.tpl{
  font-family:sans-serif,bn,hi,hy,ja,ka,km,ko,ml,my;
  font-weight:bold;
  text-transform:uppercase
}
.tpl p:before,.tpl p:after,#persp:before,#persp:after{
  filter:url(#lightA2)
}
.tpl p:before{
  text-shadow:none;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(#000 0%,#113e87 22%,#10cccc 50%,#000 51%,#e21ddc 78%,#e21ddc 78%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text
}
.tpl p:after{
  text-shadow:0 0 5px,-3px -3px .8px #aaa,-2px -3px .8px #aaa,-1px -3px .8px #aaa,0 -3px .8px #aaa,1px -3px .8px #aaa,2px -3px .8px #aaa,3px -3px .8px #aaa,3px -2px .8px #aaa,3px -1px .8px #aaa,3px 0 .8px #aaa,3px 1px .8px #aaa,3px 2px .8px #aaa,3px 3px .8px #aaa,2px 3px .8px #aaa,1px 3px .8px #aaa,0 3px .8px #aaa,-1px 3px .8px #aaa,-2px 3px .8px #aaa,-3px 3px .8px #aaa,-3px 2px .8px #aaa,-3px 1px .8px #aaa,-3px 0 .8px #aaa,-3px -1px .8px #aaa,-3px -2px .8px #aaa;
  mix-blend-mode:screen
}
.tpl p span{display:inline-block;position:absolute}
.char1,.char2{
  left:.24em;
  top:.12em;
  width:.03em;
  height:.3em;
  background:#def;
  border-radius:50%;
  filter:blur(1px)
}
.char1{animation:shine 1s infinite}
.char2{animation:shine2 1s infinite}
@keyframes shine{
  0%{transform:rotate(-45deg)scale(0);opacity:0}
  50%{transform:rotate(-45deg)scale(1);opacity:1}
  100%{transform:rotate(-45deg)scale(0);opacity:0}
}
@keyframes shine2{
  0%{transform:rotate(45deg)scale(0);opacity:0}
  50%{transform:rotate(45deg)scale(1);opacity:1}
  100%{transform:rotate(45deg)scale(0);opacity:0}
}