@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap);:root{--Mobile:375px;--Desktop:1440px --Lineargradient:linear-gradient(180deg,#6448fe,#600594);--Red:#ff5252;--White:#fff;--Lightgrayish:#dedddf;--Darkgrayish:#8e8593;--Verydark:#21092f;--Fontsize:18px;--Family:"Space Grotesk";--Weights:500}body{font-family:Space Grotesk;font-family:var(--Family);margin:0;max-height:100%;padding:0;width:100%}.App{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 3fr;max-height:100vh;min-width:100%}.leftCard{align-items:center;background-image:url(/static/media/bg-main-desktop.806e7aa7b4dbc1d78bc3.png);background-repeat:no-repeat;background-size:cover;box-sizing:border-box;flex-direction:column;height:600px}.leftCard,.rightForm{display:flex;justify-content:center;position:relative;width:100%}.rightForm{padding:0}.form{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:3em;height:-webkit-max-content;height:max-content;justify-content:center;max-width:90%;position:relative;top:15%}.formLabels{grid-gap:1rem;display:grid;gap:1rem;place-items:center;width:100%}.formLabel{align-items:flex-start;display:flex;flex-direction:column;font-size:2em;gap:1rem;letter-spacing:2px;width:100%}.inputField{border:1px solid #8e8593;border:1px solid var(--Darkgrayish);border-radius:20px;box-sizing:border-box;font-family:Space Grotesk;font-family:var(--Family);font-size:1em;outline:none;padding:2rem;width:100%}.exp_cvccontainer{align-items:center;display:flex;gap:2rem;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.expInput{display:flex;gap:1rem}.err{color:#ff5252;color:var(--Red);font-size:20px;text-align:right;width:100%}.button{background-color:#21092f;background-color:var(--Verydark);border-radius:8px;color:#fff;font-family:Space Grotesk;font-family:var(--Family);font-size:2em;padding:2rem;width:100%}.complete{background-color:#fff;box-sizing:border-box;display:grid;place-items:center;position:relative;transition:background-color .5s ease;width:100%}.complete svg{transition:all .2s ease-in-out}.checkmark{-webkit-animation:draw .5s forwards;animation:draw .5s forwards}@-webkit-keyframes draw{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes draw{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@-webkit-keyframes dispersing{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(5);transform:scale(5)}}@keyframes dispersing{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(5);transform:scale(5)}}@media (min-width:1400px){.App{gap:10rem;grid-template-columns:1fr 2fr;grid-template-rows:1fr}.leftCard{min-height:100vh}.rightForm{align-items:center;display:grid;height:100vh;place-items:center}.form{gap:2rem;width:600px}.inputField{border-radius:10px;font-size:16px;padding:1rem}.formLabel{font-size:16px;gap:10px}.button{font-size:18px;padding:1rem}.err{font-size:14px}}.card{align-items:center;background-repeat:no-repeat;background-size:cover;border-radius:8px;box-shadow:0 0 8px 8px hsla(0,0%,4%,.096);box-sizing:border-box;color:#fff;display:flex;flex-direction:column;height:400px;padding:3rem;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .5s ease-in;width:700px}.cardFront{background-image:url(/static/media/bg-card-front.8153e2ca184402a8385f.png);bottom:-20%;justify-content:space-between;left:5%;z-index:10}.cardBack{background-image:url(/static/media/bg-card-back.23f68fa3aa3d5b33dfc8.png);justify-content:center;right:5%;top:15%}.cardTop{align-items:center;gap:1rem}.cardBottom,.cardTop{box-sizing:border-box;display:flex;width:100%}.cardBottom{flex-direction:column;height:50%;justify-content:space-between}.circleBig{background-color:#fff;border-radius:50%;height:80px;width:80px}.circleSmall{border:2px solid #fff;border-radius:50%;height:40px;width:40px}.cardNumberContainer{font-size:44px;letter-spacing:4px}.card-name-expiry,.cardNumberContainer{display:flex;justify-content:space-between;width:100%}.card-name-expiry{font-size:20px;word-spacing:4px}.card-name-expiry,.cvv{align-items:center;letter-spacing:2px}.cvv{text-align:right;width:80%}@media (min-width:1400px){.card{height:300px;width:550px}.circleBig{height:50px;width:50px}.circleSmall{height:25px;width:25px}.card{position:relative}.cardFront{left:25%;top:0}.cardBack{right:-50%;top:3rem}.cardNumberContainer{font-size:34px}.card-name-expiry{font-size:18px}}
/*# sourceMappingURL=main.a263144c.css.map*/