.template{
  perspective:600px
}
.template:before{
  top:32px;bottom:32px;
  background-image:url(../print/textures/link.jpg);
  border:solid 1px #bbb;
  box-shadow:0 4px 6px rgba(0,0,0,.7)
}
#persp{
  margin-top:100px
}
.tpl{
  font-family:sans-serif,bn,hi,hy,ja,ka,km,ko,ml,my;
  font-weight:bold;
  letter-spacing:-.01em
}
.tpl:before{
  color:#333;
  text-shadow:11px 18px 4px
}
.tpl p:before{
  color:#fff;
  text-shadow:var(--3DshadowC4);
  filter:brightness(1.1)
}
.tpl p:after{
  color:#369;
  filter:url(#lightB2)
}
.template:before,#persp,#dropbox{
  transform:skewY(-20deg)rotateY(-20deg)
}
#dropbox:after{content:"Firefox 46+ is buggy\a Try to add/remove characters to/from 'Your Text' (or resize the window)\a Text jumping behind/tofront of the background element\a Stacking order depends on elements axes position relative to each other";bottom:auto;top:0;font-size:24px;font-weight:bold}