.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;display:var(--fa-display, inline-block);font-style:normal;font-feature-settings:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-brands{font-family:"Font Awesome 6 Brands"}/*!
 * Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2023 Fonticons, Inc.
 */:root{--fa-style-family-brands: "Font Awesome 6 Brands";--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fa-brands-400-f4617423.woff2) format("woff2"),url(/assets/fa-brands-400-2ef6fdde.ttf) format("truetype")}.fa-brands{font-weight:400}.fa-github:before{content:"\f09b"}:root{--text-primary: hsl(278, 68%, 11%);--text-accent-white: hsl(0, 0%, 100%);--text-accent-red: hsl(0, 100%, 66%);--text-accent-violet: hsl(279, 6%, 55%);--bg-button: hsl(278, 68%, 11%);--border-input: hsl(270, 3%, 87%);--grad-violet-1: hsl(249, 99%, 64%);--grad-violet-2: hsl(278, 94%, 30%);--ff-primary: "Space Grotesk", sans-serif;--9px: .5625rem;--12px: .75rem;--14px: .875rem;--18px: 1.125rem;--28px: 1.75rem;--fw-regular: 500}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:local(""),url(/fonts/space-grotesk-v15-latin-500.woff2) format("woff2"),url(/fonts/space-grotesk-v15-latin-500.woff) format("woff")}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}li,ol,ul{list-style:none;padding:0}a{text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{word-wrap:break-word}.card{width:min(76%,286px);height:157px;color:#fff;color:var(--text-accent-white);font-weight:500;font-weight:var(--fw-regular);border-radius:5px;box-shadow:0 15px 29px #0000001a}.card--front{position:absolute;z-index:2;top:7.875rem;left:1rem}.card--back{position:absolute;top:2rem;right:1rem}.card__img{height:100%}.card--front>span,.card--back>span{position:absolute}.card__cvc{font-size:.5625rem;font-size:var(--9px);top:45%;right:12%}.card__number{top:52%;left:6%;font-size:.875rem;font-size:var(--14px);letter-spacing:2px}.card__owner,.card__expiry{top:78%;font-size:.5625rem;font-size:var(--9px);text-transform:uppercase;letter-spacing:1px}.card__owner{left:6%}.card__expiry{right:6%}.card__logo{position:absolute;width:54px;height:30px;top:11%;left:6%}.form{width:min(87%,381px);margin:5.625rem auto 0;font-weight:500;font-weight:var(--fw-regular)}.form__group:not(:last-of-type){margin-bottom:1.25rem}.form__group--grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:.625rem;-moz-column-gap:.625rem;column-gap:.625rem}.form__label{display:block;font-size:.75rem;font-size:var(--12px);color:#21092f;color:var(--text-primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.form__input{font-size:1.125rem;font-size:var(--18px);width:100%;border:1px solid hsl(270,3%,87%);border:1px solid var(--border-input);border-radius:8px;padding:.625rem 1rem}.form__input::placeholder{font-size:inherit;color:#8e8593;color:var(--text-accent-violet)}.form__input:focus-visible{outline:none;border-width:1px;border-style:solid;border-top-color:#6448fe;border-top-color:var(--grad-violet-1);border-right-color:#6448fe;border-right-color:var(--grad-violet-1);border-left-color:#6448fe;border-left-color:var(--grad-violet-1);border-bottom-color:#600594;border-bottom-color:var(--grad-violet-2)}.form__error{color:#ff5252;color:var(--text-accent-red);font-size:.75rem;font-size:var(--12px);margin-top:.5rem;grid-column:1/3}.button{margin-top:1.75rem;background-color:#21092f;background-color:var(--bg-button);border:none;cursor:pointer;color:#fff;color:var(--text-accent-white);font-size:1.125rem;font-size:var(--18px);text-align:center;width:100%;padding:.875rem 0;border-radius:8px}.button:focus-visible{outline-offset:3px;outline-color:#6448fe;outline-color:var(--grad-violet-1)}.button--success{margin-top:0;display:block}.fa-icon{display:inline-block;width:100%;text-align:center;margin:2.5rem 0}.fa-github{font-size:1.75rem;font-size:var(--28px);cursor:pointer;color:#21092f;color:var(--text-primary)}.success{width:min(87%,381px);margin:5.625rem auto 0;text-align:center}.success__img{margin:0 auto;margin-bottom:2.1875rem}.success__heading{font-size:1.75rem;font-size:var(--28px);text-transform:uppercase;letter-spacing:3px;margin-bottom:1rem}.success__subheading{font-size:1.125rem;font-size:var(--18px);color:#8e8593;color:var(--text-accent-violet);margin-bottom:3rem}body{font-family:Space Grotesk,sans-serif;font-family:var(--ff-primary)}.cards-bg-container{background:url(/images/bg-main-mobile.png) no-repeat;background-size:cover;height:240px}.cards-container{position:relative;max-width:381px;margin:0 auto;height:100%}@media (min-width: 23rem){.card__number{font-size:1.125rem;font-size:var(--18px)}.form__label{letter-spacing:2px}}@media (min-width: 80rem){main{display:grid;grid-template-columns:420px auto;grid-column-gap:160px;-moz-column-gap:160px;column-gap:160px}.cards-bg-container{display:grid;align-items:center;background:url(/images/bg-main-desktop.png) no-repeat;background-size:cover;min-height:100vh}.cards-container{margin:0;width:100%;max-width:none;height:auto}.card{width:447px;height:245px}.card--front{position:relative;top:auto;top:initial;left:auto;left:initial;transform:translate(140px)}.card--back{position:relative;top:auto;top:initial;left:auto;left:initial;transform:translate(228px,36px)}.card__number{font-size:1.75rem;font-size:var(--28px)}.card__owner,.card__expiry,.card__cvc{font-size:.875rem;font-size:var(--14px)}.form,.success{align-self:center;justify-self:center;grid-column:2/3;grid-row:1/2}.form__group:not(:last-of-type){margin-bottom:1.625rem}}@media (min-width: 90rem){main{grid-template-columns:483px auto;-moz-column-gap:100px;column-gap:100px}.card--front{transform:translate(164px)}.card--back{transform:translate(258px,36px)}}.input-error{border:1px solid hsl(0,100%,66%)}.hidden{display:none}