:root{--glitter:url(https://assets.codepen.io/13471/silver-glitter-background.png);--duration:6.66s}.card-front{display:grid;position:relative;transform:translateZ(.01px);width:90vw;max-width:680px;aspect-ratio:3/2;border-radius:12px;background-image:url(https://simey-credit-card.netlify.app/img/bgs/default.jpg);background-size:cover;box-shadow:0 30px 40px -25px #0f0514,0 20px 50px -15px #0f0514;overflow:hidden;animation:tilt var(--duration) ease infinite;image-rendering:optimizequality}.card-front:before{transform:translateZ(.01px);background-image:var(--glitter),var(--glitter),linear-gradient(120deg,#000 25%,#fff,#000 75%);background-size:100% 100%,80% 80%,200% 200%;background-blend-mode:multiply,multiply,overlay;background-position:50% 50%,50% 50%,50% 50%;mix-blend-mode:color-dodge;filter:brightness(2) contrast(.8);z-index:0}.card-front:after,.card-front:before{content:"";inset:0;position:absolute;animation:bg var(--duration) ease infinite}.card-front:after{background:linear-gradient(125deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) .1%,hsla(0,0%,100%,0) 60%);background-size:200% 200%;mix-blend-mode:hard-light}.card-front *{font-family:PT Mono,monospace;position:absolute;color:#ccc;letter-spacing:.075em;text-transform:uppercase;text-shadow:-1px -1px 0 hsla(0,0%,100%,.5),1px -1px 0 hsla(0,0%,100%,.5),1px 1px 0 rgba(0,0,0,.5),1px -1px 0 rgba(0,0,0,.5);z-index:5}.number{top:20%;left:50%;transform:translateX(-50%);font-size:clamp(6rem,14vw - 3.5rem,6.5rem)}@media (max-width:768px){.number{top:25%;font-size:clamp(4rem,10vw - 2rem,5rem)}}@media (max-width:480px){.number{top:30%;font-size:clamp(3rem,8vw - 1.5rem,4.5rem)}}.name{bottom:30%;left:5%;font-size:clamp(1.4rem,3.8vw + 1.2rem,2.1rem)}@media (max-width:768px){.name{bottom:20%;font-size:clamp(1.2rem,3.5vw + 1rem,1.8rem)}}@media (max-width:480px){.name{bottom:15%;font-size:clamp(1rem,3vw + 1rem,1.5rem)}}.cardLogo{top:5%;right:5%;width:15%;filter:invert(1) saturate(0) brightness(1) contrast(1.2);mix-blend-mode:screen}.contactless{left:23%;top:30%;width:12%;rotate:90deg;stroke-width:1.25;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.5;position:absolute}@keyframes tilt{0%,to{transform:translateZ(.01px) rotateY(-20deg) rotateX(5deg)}50%{transform:translateZ(.01px) rotateY(20deg) rotateX(5deg)}}@keyframes bg{0%,to{background-position:50% 50%,calc(50% + 1px) calc(50% + 1px),0 50%}50%{background-position:50% 50%,calc(50% - 1px) calc(50% - 1px),100% 50%}}