*{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:#141469;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:#2d0938;border:.1rem solid #323238;border-radius:.6rem}#app header{display:flex;align-items:center}.container{position:relative;width:100px;height:50px;display:flex;justify-content:center;margin-top:600px;right:750px}.cc{background:no-repeat center/cover;background-image:url(/cc-bg.svg);width:36rem;height:23rem;padding:2rem;border-radius:17px;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)}.container{right:950px}.container button{align-items:center;background-image:linear-gradient(144deg,#AF40FF,#5B42F3 50%,#00DDEB);border:0;border-radius:8px;box-shadow:#9741fc33 0 15px 30px -5px;box-sizing:border-box;color:#fff;display:flex;font-size:2rem;justify-content:center;line-height:1em;max-width:100%;min-width:250px;padding:19px 24px;text-decoration:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;white-space:nowrap;cursor:pointer}.container button:hover{color:#000}@media (min-width: 768px){.button-63{font-size:24px;min-width:196px}}dialog::backdrop{background-color:#00000080}dialog{left:27.4%;top:5%;align-items:center;overflow:auto;resize:both;border:none;border-radius:.5rem;box-shadow:0 0 1em #0000004d;width:40%;height:45%;background-color:#03f16e}dialog h2{display:flex;align-items:center;justify-content:center;font-size:35px;margin-top:10px;color:#000}dialog .cards-flag{display:flex;align-items:center;flex-direction:column;width:200px;height:180px;margin-top:15px;margin-left:-20px}dialog .cards-flag span{position:relative;display:flex;margin-left:170px;top:-22px;font-size:1.8rem}dialog .cards-flag img{width:95px;height:95px}dialog button{display:flex;align-items:center;justify-content:center;margin-left:300px;margin-top:85px;background-image:linear-gradient(144deg,#AF40FF,#5B42F3 50%,#00DDEB);border:0;border-radius:8px;box-shadow:#9741fc33 0 15px 30px -5px;box-sizing:border-box;color:#fff;font-size:2rem;line-height:1em;max-width:100%;min-width:150px;padding:19px 24px;text-decoration:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;white-space:nowrap;cursor:pointer}@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}}