.creditCard{position:relative;width:28.9em;height:15.835em;background-color:transparent;border-radius:.7rem;background-size:cover;background-repeat:no-repeat;overflow:hidden;color:white;animation:entrance 1s ease-out 0s 1;transition:right .5s ease-in-out;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);cursor:pointer}.front{background-image:url(/_next/static/media/bg-card-front.209d5f43.png)}.back{background-image:url(/_next/static/media/bg-card-back.50bec165.png)}.creditCard label{cursor:grab}.creditCard img,.creditCard__cvc,.creditCard__date,.creditCard__name,.creditCard__number{position:absolute}.creditCard:hover{transform:translate(20px) rotate(3deg);transition:transform .3s ease-in}.creditCard img:first-of-type{width:6em;top:12%;left:7%}.creditCard__number{font-size:190%;letter-spacing:.1em;font-weight:500;text-align:center;bottom:33%;left:7%}.creditCard__number span:nth-child(12),.creditCard__number span:nth-child(4),.creditCard__number span:nth-child(8){margin-right:.5em}.creditCard__date,.creditCard__name{font-size:1em;font-weight:400;text-transform:uppercase;bottom:1.9em}.creditCard__name{left:7%;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.creditCard__date{right:2.5em}.creditCard__cvc{position:absolute;font-size:1.3em;letter-spacing:.2ch;bottom:5.45em;right:3.5em}@keyframes entrance{0%{transform:translateX(20px)}to{transform:translateX(0)}}.forms{flex-flow:column nowrap;max-width:750px;text-transform:uppercase;letter-spacing:.1ch}.form__input,.forms{display:flex;padding:10px}.form__input{position:relative;width:100%;background-color:#f7f7f7;border:1px solid rgb(233,233,233);border-radius:6px;flex-direction:column;margin-bottom:1.8em}.shake>:not(button,.form__complete){animation:shake .3s}.form__input span{display:none;position:absolute;bottom:-1.5em;color:rgb(225,20,20);letter-spacing:normal;text-transform:none;white-space:nowrap;font-size:.74em}.form__input>label{white-space:nowrap;margin-bottom:1em}.forms label{font-size:1rem;color:black;font-weight:600}.forms input{outline:none;border:1px solid rgb(232,232,232);height:2em;width:100%;border-radius:.3rem;padding:1em;font-size:1em;transition:border-color .3s ease-in-out}.forms input:focus{background:linear-gradient(white,white) padding-box,linear-gradient(90deg,rgb(232,232,232),rgb(232,232,232)) border-box;border-color:transparent}.forms input:invalid[focused=true]{border-color:rgb(225,20,20)}.forms input:invalid[focused=true]~span{display:block}.forms__detail{margin-bottom:1.2em}.form-button{width:100%;border:none;height:50px;border-radius:.7em;cursor:pointer;font-weight:700;font-size:1em;transition:background .1s ease-in-out}.form__complete{width:100%;display:grid;place-items:center;margin:2rem 0;animation:appear .2s}.form__complete img{margin-bottom:2rem}.form__complete>h2{font-weight:600;margin-bottom:.8rem}.form__complete>h2:after{content:"!";width:100%}.form__complete>p{font-size:normal;letter-spacing:normal}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}