.App{min-height:100vh}.error-message{color:var(--primary-red);font-size:10px;font-weight:bolder;visibility:hidden}.error-message.visible{visibility:visible}.App{background-color:var(--neutral-white);background-image:url(/images/bg-main-mobile.png);background-repeat:no-repeat;background-size:100% 24%;background-position:top center}.card{--card-border-radius: 10px;position:relative;margin:0 auto;color:var(--neutral-light-grayish-violet);padding:1rem}.card__logo{width:50px;margin-bottom:2.5rem}.card__front{background-image:url(/images/bg-card-front.png);border-radius:var(--card-border-radius);background-position:center;background-repeat:no-repeat;background-size:100% 100%;box-shadow:50px 50px 20px -40px #dedddf;padding:1.2rem;max-width:20rem;margin:0 auto;position:relative;top:110px;left:-10px;z-index:20}.card__number{margin-bottom:1rem;width:100%;font-size:19px;font-weight:bolder;letter-spacing:1.5px}.card__bio{font-size:14px;display:flex;justify-content:space-between}.card__back{background-image:url(/images/bg-card-back.png);border-radius:var(--card-border-radius);background-position:center;background-repeat:no-repeat;background-size:100% 100%;min-height:160px;position:relative;top:-150px;left:10px;max-width:20rem;margin:0 auto;z-index:0}.card__cvv{color:var(--neutral-white);font-size:14px;position:absolute;top:70px;right:35px}.form{max-width:20rem;width:95%;margin:0 auto 1rem}.form__input-container{margin-bottom:1rem}.form__input{outline:none;padding:1rem;min-height:40px;border:1px solid var(--neutral-light-grayish-violet);border-radius:9px;font-size:1rem;font-weight:700;width:100%}.form__input::placeholder{font-weight:bolder;font-size:16px;color:var(--neutral-dark-grayish-violet)}.form__input:focus{border:1px solid var(--neutral-very-dark-violet)}.form__label{text-transform:uppercase;font-size:14px;display:block;margin-bottom:.7rem;color:var(--neutral-very-dark-violet)}.form__card-exp{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.form__card-exp>*{width:45%}.form__lastDetail{display:grid;grid-template-columns:2fr 1fr;align-items:center;justify-content:center;gap:1rem}.form__btn{border:none;outline:none;width:100%;padding:15px 30px;border-radius:9px;color:var(--neutral-white);background-color:var(--neutral-very-dark-violet);font-weight:bolder;font-size:16px;cursor:pointer;margin-top:1rem}.form__input.error{border:1px solid red}small{display:block;margin-top:.3rem}@media (min-width: 400px){.card__number{letter-spacing:1.5px}}@media (min-width: 940px){.App{background-position:left top;background-size:30% 100%;background-image:url(/images/bg-main-desktop.png)}.parent{align-items:center;gap:1rem;min-height:100vh;padding-inline:.5rem;display:grid;grid-template-columns:repeat(2,auto)}.card__front{top:-60px;left:-80px;padding-block:1.5rem;width:20rem;min-height:12rem;box-shadow:60px 30px 35px -40px #dedddf}.card__number{margin-bottom:1.5rem}.card__back{top:-30px;left:-40px;min-height:12rem;width:20rem;box-shadow:60px 30px 35px -40px #dedddf}.card__cvv{top:85px}}.complete{max-width:21rem;width:95%;margin:0 auto;text-align:center}.complete__logo{margin-bottom:1.5rem}.complete__heading{text-transform:uppercase;margin-bottom:1rem}.complete__btn{border:none;outline:none;width:100%;padding:15px 30px;border-radius:9px;color:var(--neutral-white);background-color:var(--neutral-very-dark-violet);font-weight:bolder;font-size:16px;cursor:pointer;margin-block:1.8rem}html{font-size:100%;box-sizing:border-box}*,*:after,*:before{box-sizing:inherit}*{margin:0;padding:0}img{max-width:100%}button{font:inherit;letter-spacing:1px;font-weight:700}.container{max-width:63.5rem;margin:0 auto}body{font-family:Space Grotesk,sans-serif;font-size:18px}h1,h3{font-weight:bolder;line-height:1.1}a,a:visited,a:active{text-decoration:none}:root{--primary-linear-gradient-light: hsl(249, 99%, 64%);--primary-linear-gradient-dark: hsl(278, 94%, 30%);--primary-red: hsl(0, 100%, 66%);--neutral-white: hsl(0, 0%, 100%);--neutral-light-grayish-violet: hsl(270, 3%, 87%);--neutral-dark-grayish-violet: hsl(279, 6%, 55%);--neutral-very-dark-violet: hsl(278, 68%, 11%)}