@import"https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=DynaPuff:wght@400..700&family=Epilogue:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@200..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Space Grotesk,sans-serif}#root{min-height:100vh}body{height:100vh;min-height:100vh;position:relative}.wrapper{display:flex;justify-content:space-between}.static-background{position:absolute;width:100%;height:100dvh;z-index:-999;overflow:hidden}.static-background .desktop-bg{height:100%;width:25%}.mobile-bg{width:100%;height:200px;display:none;position:absolute;top:0;z-index:-999}.form-container{height:100vh;width:50%;display:flex;align-items:center;justify-content:start}.form-container form{display:flex;flex-direction:column;margin:15px;max-width:390px}.form-container form label{font-size:.9rem;margin-bottom:10px;font-weight:500;color:#21092f}.form-container form input{font-size:1.125rem;margin-bottom:20px;padding:10px;border-radius:7px;border:2px solid hsl(270,3%,87%)}.form-container form input:focus{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(to right,#6448fe,#600594) border-box;border:2px solid transparent;outline:none}.form-container form input::-moz-placeholder{color:#8e8593}.form-container form input::placeholder{color:#8e8593}.form-container form div{display:flex}.form-container form div div:first-child{display:flex;flex-direction:column;margin-right:20px}.form-container form div .exp-date-container{width:50%}.form-container form div .exp-date-container div{gap:10px}.form-container form div .exp-date-container div input{width:50%}.form-container form div .cvc-container{display:flex;flex-direction:column;width:50%}.form-container form button{background-color:#21092f;color:#fff;font-size:1.2rem;padding:13px;border-radius:7px;border:none;margin-top:20px;transition:.1s}.form-container form button:hover{cursor:pointer;background-color:#600594;box-shadow:0 5px #46046c;transform:translateY(-5px)}.form-container form button:active{background-color:#6f07ab;box-shadow:none;transform:translateY(3px)}span{font-size:.8rem;transform:translateY(-10px);color:#ff5252;display:none}.exp-date-container{position:relative}.exp-date-container span{position:absolute;bottom:0}input:invalid{outline:1px solid hsl(0,100%,66%)}input:invalid~span{display:block}input:invalid:not(:focus):-moz-placeholder-shown{outline:none}input:invalid:not(:focus):placeholder-shown{outline:none}input:invalid:not(:focus):-moz-placeholder-shown~span{display:none}input:invalid:not(:focus):placeholder-shown~span{display:none}.thank-you-page{display:flex;flex-direction:column;align-items:center;margin:15px;width:390px}.thank-you-page img{width:80px;margin-bottom:30px}.thank-you-page p:first-of-type{font-size:2rem;font-weight:500;margin-bottom:20px;letter-spacing:3px}.thank-you-page p:last-of-type{color:#8e8593;font-size:1rem;margin-bottom:30px;font-weight:500;letter-spacing:1px}.thank-you-page button{background-color:#21092f;color:#fff;font-size:1.2rem;padding:13px;width:100%;border-radius:7px;border:none;margin-top:20px;transition:.1s}.thank-you-page button:hover{cursor:pointer;background-color:#600594;box-shadow:0 5px #46046c;transform:translateY(-5px)}.thank-you-page button:active{background-color:#6f07ab;box-shadow:none;transform:translateY(3px)}@media (max-width: 1100px){.form-container{justify-content:center}}@media (max-width: 957px){.card-container{position:relative;height:300px}.wrapper{display:flex;flex-direction:column}.form-container{width:100%;display:flex;flex-direction:column;position:absolute}.mobile-bg{display:block}.desktop-bg{display:none}form,.thank-you-page{padding-top:360px}}.card-back-container{width:400px;position:absolute;height:220px;top:75%;left:16%;transform:translate(-16%,-75%);z-index:-4}.card-back-container .back-card-background{width:100%;position:absolute}.card-back-container .secure-number{position:absolute;color:#fff;top:45%;right:13%;font-size:15px}@media (max-width: 957px){.card-back-container{top:50%;left:55%;transform:translate(-50%,-50%)}}@media (max-width: 500px){.card-back-container{width:360px;height:200px}.card-back-container .secure-number{position:absolute;color:#fff;top:44%;right:13%;font-size:15px}}@media (max-width: 425px){.card-back-container{width:320px;height:175px}.card-back-container .secure-number{position:absolute;color:#fff;top:45%;right:13%;font-size:13px}}.card-front-container{width:400px;position:absolute;height:220px;top:25%;left:9%;transform:translate(-9%,-25%)}.card-front-container .front-card-background{width:100%;position:absolute;z-index:-5}.card-front-container .card-logo{width:80px}.card-front-container .card-information{height:100%;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:25px}.card-front-container .card-information .card-number{font-size:29.6px}.card-front-container .card-information .name-and-date{display:flex;justify-content:space-between;margin-top:20px;font-size:11.2px}@media (max-width: 957px){.card-front-container{top:91%;left:46%;transform:translate(-50%,-50%)}}@media (max-width: 500px){.card-front-container{width:360px;height:200px}.card-front-container .card-logo{width:70px}.card-front-container .card-information{height:100%;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:25px}.card-front-container .card-information .card-number{font-size:25px;letter-spacing:1px}}@media (max-width: 425px){.card-front-container{width:320px;height:175px}.card-front-container .card-logo{width:50px}.card-front-container .card-information{height:100%;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:25px}.card-front-container .card-information .card-number{font-size:20px;letter-spacing:1px}}