@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Space Grotesk,sans-serif;transition:.3s linear}.main-container{display:flex;align-items:center}.sidebar{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2.31rem;max-width:30.1875rem;width:100%;height:100vh;background-color:#21092f}.logo{max-width:5.25rem;width:100%}.front-card,.back-card{max-width:27.9375rem;width:100%;height:15.3125rem;position:relative}.front-card{margin-top:3rem;margin-left:10.25rem}.card-content{max-width:24rem;width:100%;margin-inline:auto;margin-left:1.7rem;position:absolute;top:0}.card-content .logo{margin-top:1.75rem}.card-num,.name-card-details,.back-card-cvv{color:#fff;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.125rem;text-transform:uppercase}.card-num{margin-top:4rem;margin-bottom:1.59rem;text-align:center;font-size:1.75rem;letter-spacing:.21388rem}.name-card-details{display:flex;justify-content:space-between;align-items:center}.back-card{margin-left:16.12rem}.back-card-content{position:absolute;top:0}.back-card-cvv{margin-top:6.94rem;margin-left:22.38rem}.form,.completion-page{max-width:23.8125rem;width:100%;margin-inline:auto}.form-group input:hover,.exp-form-group input:hover,.cvv-form-group input:hover{cursor:pointer;border:1px solid var(--Gradient, #6348fe)}.form-group{display:flex;flex-direction:column;gap:.56rem}.form-group label{color:#21092f;font-size:.75rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.125rem;text-transform:uppercase}.form-group input,.exp-form-group input,.cvv-form-group input{max-width:23.8125rem;width:100%;height:2.8125rem;margin-bottom:1.62rem;padding-block:.69rem;padding-inline:1rem;border-radius:.5rem;border:1px solid #dfdee0;outline:none;background:#fff}.form-date-group{display:flex}.exp-form-group{display:flex;align-items:center;justify-content:center}.exp-form-group input,.cvv-form-group input{outline:none;max-width:5rem;width:100%;height:2.8125rem}.exp-details-label{font-size:.75rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.125rem;text-transform:uppercase}.cvc-label{margin-left:3.13rem}.cvv-form-group{margin-top:.56rem}.exp-form-group{gap:.62rem;margin-top:.56rem;margin-right:1.25rem}button{font-size:1.125rem;font-weight:500;font-style:normal;max-width:23.8125rem;width:100%;padding-block:.94rem;padding-inline:9.81rem;border-radius:.5rem;background:#21092f;outline:none;border:none;color:#fff}button:hover{cursor:pointer;background:#6348fe}.completion-page{display:flex;flex-direction:column;align-items:center}.completion-page img{margin-bottom:2.19rem}.completion-page h1{margin-bottom:1rem}.completion-page p{margin-bottom:3rem}.error{margin-top:-1.9rem;margin-bottom:1.62rem;color:red;font-size:.75rem;font-style:normal;font-weight:500;line-height:normal}.year,.month,.cvv-form-group{display:flex;flex-direction:column;justify-content:center;gap:.5rem}@media screen and (max-width: 1200px){.form{margin-left:10rem}}@media screen and (max-width: 1100px){.form{margin-left:10rem}.form-group input,.exp-form-group input,.cvv-form-group input{width:90%;font-size:.75rem}.completion-page{margin-left:10rem}}@media screen and (max-width: 1050px){.form{margin-left:10rem}button{max-width:20rem;width:100%;margin-inline:auto;text-align:center;padding-inline:0}}@media screen and (max-width: 996px){.main-container{flex-direction:column;align-items:center;padding:1rem}.sidebar{max-width:40rem;width:100%;height:100%;padding:1rem}.front-card{margin-left:-14rem;margin-top:6rem;position:relative;z-index:1}.back-card{margin-left:10rem;margin-top:-23rem;position:relative}.card-content{position:absolute;width:85%}.card-num{font-size:1.25rem;margin-top:3rem;margin-bottom:3rem}.name-card-details{font-size:.7rem;margin-top:.5rem}.form{margin-top:6rem;margin-inline:auto;padding:1rem;max-width:30rem;width:100%}.form-group-details{display:flex;justify-content:center;align-items:center;gap:1.2rem}.form-group-details input{width:100%}.form-date-group{justify-content:space-around;margin-inline:-1.7rem}.exp-labels{padding-inline:2rem;display:flex;align-items:center;text-align:center}.cvc-label{margin-left:10.2rem}button{display:block;margin-inline:auto;margin-top:1.5rem}.completion-page img{max-width:5.2rem;width:100%}.completion-page{margin-inline:auto;margin-top:5rem}.completion-page p{margin-bottom:-.1rem}}@media screen and (max-width: 670px){.main-container{flex-direction:column;align-items:center;padding:1rem}.sidebar{max-width:100%;width:100%}.front-card,.back-card{max-width:18rem;height:auto;margin:1rem auto;position:relative}.back-card{margin-top:-25rem;margin-left:10rem}.front-card{margin-left:0rem;margin-top:8rem;position:relative;z-index:1}.card-content{position:absolute;width:100%}.card-num{font-size:1.24rem;max-width:40rem;width:100%;margin-inline:auto;text-align:center}.name-card-details{font-size:.7rem;margin-top:.5rem}.form{margin-top:4rem;padding:1rem;max-width:25rem;width:100%}.form-group-details{display:block;flex-direction:column;align-items:flex-start}.form-group input,.exp-form-group input,.cvv-form-group input{font-size:.8rem;padding:.5rem}.exp-labels{padding-inline:0}.form-date-group{justify-content:start;margin-inline:auto}.cvc-label{margin-left:3.5rem}button{font-size:1rem;padding-block:.8rem}}@media screen and (max-width: 652px){.sidebar{height:15rem;padding-top:5rem}.front-card-img,.back-card-img{max-width:17.8125rem;width:100%}.card-content .logo{max-width:3rem;margin-top:1.1rem;margin-bottom:2.31rem}.card-num{font-size:1.1rem;margin-top:.5rem;margin-bottom:1rem;margin-left:-1.4rem}.card-name{margin-right:5.5rem;width:50%;word-wrap:break-word}.name-card-details{font-size:.6rem;justify-content:start}.form{margin-top:2rem;padding:1rem;max-width:25rem;width:100%}.form-group input,.exp-form-group input,.cvv-form-group input{font-size:.8rem;padding:.5rem}.back-card-cvv{margin-top:4.25rem;margin-left:12.6rem}.back-card{margin-top:-17rem;margin-left:13rem}.front-card{height:auto;margin-top:-2rem;margin-right:5rem}button{font-size:1rem;padding-block:.8rem}}@media screen and (max-width: 520px){.back-card{margin-left:8rem}.front-card{margin-right:6rem}}@media screen and (max-width: 470px){.back-card{margin-left:6rem}}@media screen and (max-width: 400px){.back-card,.front-card{max-width:14rem;width:100%}.front-card{margin-left:2rem}.back-card-cvv{margin-left:10rem;margin-top:3.2rem}.card-num{font-size:.85rem;margin-top:-1rem}.name-card-details{margin-left:-1rem}.card-cvv{margin-left:-2rem}}@media screen and (max-width: 380px){.back-card{margin-left:3.5rem}}@media screen and (min-width: 1440px){.main-container{max-width:1440px;width:100%;margin-inline:auto}}