.template{
  perspective:800px
}
.template:before{
  background-image:url(../print/backgrounds/grass.jpg);background-size:cover
}
.template:after{background:url(../print/img/bird.png)no-repeat top right;background-size:200px;z-index:8}
#persp{
  transform:rotatey(9deg);
  transform-origin:0;
  padding:3rem 12rem;
  margin:auto;
  filter:drop-shadow(0 0 .7px green)
}
#persp:before{
  background-image:linear-gradient(90deg,green,gold);
  -webkit-mask-box-image:url(../print/mask/mask17.png) 0 0 0 0 stretch;
  mask:url(../print/mask/mask17.png)0 0/100% 100%
}
.tpl{font-weight:bold}
.tpl:before{
  color:red;
  text-shadow:var(--3DshadowD3)
}
.tpl p{
  filter:url(#lightA1)drop-shadow(0 0)
}
.tpl p:before{
  color:gold
}
.tpl p:after{
  color:red;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.5),rgba(0,0,0,1));
  mask:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.5),rgba(0,0,0,1))
}
#dropbox:after{content:"Waiting for Firefox CSS mask"}