*{margin:0;padding:0;box-sizing:border-box}:root{font-size:62.5%;font-family:Inter,sans-serif;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{font-size:1.6rem;background:#121214;display:flex;place-items:center;min-height:100vh}.flex{display:flex}#app{display:grid;justify-content:center;gap:3.2rem;width:90%;max-width:42rem;margin:0 auto;padding:2.8rem 6rem 4rem;background:#202024;border:.1rem solid #323238;border-radius:.6rem}#app header{display:flex;align-items:center}.cc{background:no-repeat center/cover;background-image:url(/cc-bg.svg);width:36rem;height:23rem;padding:2rem;display:flex;flex-direction:column;justify-content:space-between}.cc-logo{display:flex;justify-content:space-between;align-items:center}.cc-info{display:grid;gap:1.4rem}.cc-number{font-size:2.4rem;font-weight:700;line-height:2.9rem;letter-spacing:.04em;color:#e8e8e8;text-shadow:0 .12rem .32rem rgb(23 23 23 / 40%)}.cc-holder,.cc-expiration,.cc-security{display:grid;gap:.4rem}.cc .label{font-size:1rem;line-height:1.2rem}.cc .value{font-size:1.4rem;font-weight:700;color:#fff;text-shadow:0 .25rem .25rem rgb(22 22 22 / 16%);text-transform:uppercase}.cc-extra{display:flex;justify-content:space-between;align-items:center}.cc,.cc-logo,.cc-number{position:relative}.cc-bg{position:absolute;inset:0;z-index:0}form{max-width:36rem;display:grid;gap:1.6rem}form .input-wrapper{display:grid;gap:.6rem}form label{font-weight:600;font-size:1.2rem;line-height:1.5rem;letter-spacing:.01px;text-transform:uppercase;color:#e1e1e6}form input{background:#121214;border:1px solid #323238;border-radius:6px;height:41px;padding-inline:1.2rem;width:100%;color:#fff;text-transform:uppercase}form .flex{gap:1.4rem}form .flex .input-wrapper{flex:1}form button{margin-top:1.6rem;display:flex;justify-content:center;align-items:center;padding:1.6rem 0;background:#42d3ff;border-radius:.6rem;cursor:pointer;border:none;font-weight:700;font-size:1.4rem;line-height:1.7rem;color:#121212;transition:filter .3s}form button:hover{filter:brightness(1.1)}@media (max-width: 420px){:root{font-size:50%}body{background:#202024}#app{background:none;border:none}.cc-bg svg{width:100%;height:auto}}@media (min-width: 780px){#app{grid-template-areas:"A B" "C B";width:fit-content;max-width:fit-content;padding-inline:4.8rem;grid-template-columns:.8fr 1fr}#app header{grid-area:A}#app section.cc{grid-area:B;align-self:center}#app form{grid-area:C}}