@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap";:root{--clr-cardtxt: hsl(0, 0%, 100%);--clr-inputbdr: hsl(270, 3%, 87%);--clr-inputtxt: hsl(279, 6%, 55%);--clr-inputerr: hsl(0, 100%, 66%);--clr-gradientl: hsl(249, 99%, 64%);--clr-gradientr: hsl(278, 94%, 30%);--clr-button: hsl(278, 68%, 11%)}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:Space Grotesk,sans-serif;margin:0;padding:0}.card{background-image:url(/interactive-card-details-form-main/assets/bg-main-mobile.9e839c55.png);background-repeat:no-repeat;background-size:cover;height:12em}.card>*{color:var(--clr-cardtxt);width:15em;height:8.25em;background-repeat:no-repeat;padding:1em}.card__back{background-image:url(/interactive-card-details-form-main/assets/bg-card-back.503939c0.png);background-size:15em;background-position:center;position:absolute;z-index:0;top:1.5em;right:50%;transform:translate(60%)}.card__front{background-image:url(/interactive-card-details-form-main/assets/card-logo.c6566e76.svg),url(/interactive-card-details-form-main/assets/bg-card-front.5aca8db4.png);background-size:3em,15em;background-position:top 1em left 1em,center;position:absolute;z-index:1;top:6.2em;right:50%;transform:translate(40%)}.card__cvc{font-size:10px;margin-top:4.5em;margin-left:17.5em}.card__front-container{display:flex}.card__number{font-size:18px;margin:0;padding-top:3em}.card__name{font-size:10px;width:17.5em}.card__date{font-size:10px}.form,.form__submitted{margin:6.5em 1em}.form__message{visibility:hidden;color:var(--clr-inputerr);margin-top:0}.form__message.form__message-error{visibility:visible}.form__submitted{display:none}.form__input{background-color:var(--clr-inputbdr);padding:2px;margin-top:.25em;border-radius:10px}.form__input.form__input-error{background-color:var(--clr-inputerr);padding:2px}.form__input:focus-within{background-image:linear-gradient(to right,var(--clr-gradientl),var(--clr-gradientr))}input{border:none;color:var(--clr-inputtxt);width:100%;padding:.5em 1em;border-radius:9px}input:focus{outline:none}.form__flex{display:flex;width:100%}.form__flex-left{display:flex;width:20em;gap:.5em}.form__flex-right{width:100%;margin-left:1em}button{width:100%;padding:1em;border:none;background-color:var(--clr-button);color:var(--clr-cardtxt);font:inherit;border-radius:10px}.form__submitted{background-image:url(/interactive-card-details-form-main/assets/icon-complete.0e154f18.svg);background-repeat:no-repeat;background-position:top center;padding-top:6em;text-align:center}.form__submitted-head{color:var(--clr-button);font-size:25px;letter-spacing:3px}.form__submitted-body{color:var(--clr-inputtxt);margin-bottom:3em}.attribution{position:absolute;bottom:0;right:0}@media screen and (min-width:900px){main{display:flex}.card{width:30%;height:100vh;background-image:url(/interactive-card-details-form-main/assets/bg-main-desktop.8bf4510a.png)}.card>*{width:30em;height:16.5em;padding:2em}.card__back{background-size:30em;position:relative;top:22vh;right:auto;transform:translate(0);margin-left:40%}.card__front{background-position:top 2em left 2em,center;background-size:6em,30em;position:relative;top:19vh;right:auto;transform:translate(0);margin-left:20%}.card__cvc{font-size:20px;margin-top:4.3em;margin-left:17.5em}.card__number{font-size:2.2em;margin:0;padding-top:3.5em}.card__name{font-size:20px;width:17em;margin:.5em 0}.card__date{font-size:20px;margin:.5em 0}.form{margin-top:30vh;margin-left:21em;width:30%}.form__submitted{margin:auto}}