.template{
  perspective:300px;
  perspective-origin:50% 120px
}
.template:before{
  background:var(--bg33);
  background-color:gray;
  color:#fff
}
#persp{
  transform-origin:top left;
  transform:skew(30deg)rotatey(45deg)rotatex(-25deg)rotatez(-20deg);
  margin-top:100px
}
.tpl{
  font-weight:bold;
  filter:drop-shadow(-20px 14px 2px rgba(0,0,0,.4))
}
.tpl p:before,.tpl p:after{padding-right:.4em}
.tpl:before{display:none}
.tpl p:before{
  background:#ddd;
  box-shadow:0 0 1px 1px #888 inset;
  transform:skew(-60deg);
  -webkit-clip-path:var(--clip34);
  clip-path:var(--clip34)
}
.tpl p:after{background:#fff;
  transform:skew(30deg);
  box-shadow:0 0 1px 1px #aaa inset;
  -webkit-clip-path:var(--clip33);
  clip-path:var(--clip33)
}
@-moz-document url-prefix(){#dropbox:after{content:"Set about:config -> layout.css.clip-path-shapes.enabled -> true"}}