@font-face{font-display:swap;font-family:Roboto;src:url(/assets/Roboto-Regular-Dj9u0zRN.ttf) format("truetype");font-weight:400}@font-face{font-display:swap;font-family:Roboto;src:url(/assets/Roboto-Bold-BnrYUwvd.ttf) format("truetype");font-weight:700}:root{--ff-primary:"Roboto", "Helvetica Neue", Arial, sans-serif;--fs-h2: clamp(2.5rem, 1.5458rem + 4.0712vi, 3.5rem);--fs-body: 1rem;--fs-label: .75rem;--fw-1: 400;--fw-2: 700;--lh-body: 1.5}:root{--clr-primary: hsl(234, 29%, 20%);--clr-secondary: hsl(4, 100%, 67%);--clr-bg: hsl(235, 18%, 26%);--clr-input: hsl(0, 0%, 46%);--clr-light: hsl(0, 0%, 100%);--clr-linear-grad: linear-gradient(90deg, hsl(15, 100%, 61%), hsl(346, 100%, 66%));--clr-btn-shadow: hsla(4, 100%, 67%, .5);--clr-error-bg: hsl(2, 100%, 95%);--clr-attr: hsl(4, 50%, 50%);--clr-attr-sec: hsl(4, 100%, 73%)}html{font-size:100%}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{font-family:var(--ff-primary);font-size:var(--fs-body);font-weight:var(--fw-1);line-height:var(--lh-body);color:var(--clr-primary)}h2{font-size:var(--fs-h2)}h1,h2,h3{line-height:1}p,li,figcaption{text-wrap:pretty;max-inline-size:65ch}img,picture,video,canvas,svg{display:block;max-inline-size:100%}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}a,a:visited,a:active{text-decoration:none}ul{list-style-type:none}.body{min-block-size:100vh;position:relative}.main{container-type:inline-size}.sign-up__img{inline-size:100%;block-size:auto}.sign-up__content{padding-inline:clamp(24px,8.7328px + 4.0712vi,40px);padding-block-end:44px}.sign-up__form{margin-block-start:16px}.sign-up__list-item-icon{inline-size:1.3125rem;block-size:1.3125rem}.sign-up__label{font-weight:var(--fw-2);font-size:var(--fs-label)}.sign-up__error{color:var(--clr-secondary);font-size:var(--fs-label);font-weight:var(--fw-2)}.sign-up__email{padding-block:16px;padding-inline:24px;margin-block-end:16px;border-radius:.5rem;border:none;outline:.0625rem solid var(--clr-input)}.sign-up__email:focus-visible{outline:.125rem solid var(--clr-primary)}.sign-up__button{border-radius:.5rem;border:none;color:var(--clr-light);background-color:var(--clr-primary);font-weight:var(--fw-2);cursor:pointer;position:relative;overflow:clip;z-index:1;outline:none;padding:16px}.sign-up__button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--clr-linear-grad);z-index:-1;opacity:0;transition:opacity .3s ease}.sign-up__button:hover:before,.sign-up__button:focus-visible:before{opacity:1}.modal{border:none;padding-inline:24px;padding-block-start:149px;padding-block-end:70px;min-inline-size:100%;min-block-size:100%;z-index:1000}.modal__icon{inline-size:4rem;block-size:4rem}.modal__title{max-inline-size:18ch}.modal__desc{max-inline-size:36ch;margin-block-end:263px}.modal__button{border-radius:.5rem;border:none;color:var(--clr-light);background-color:var(--clr-primary);font-weight:var(--fw-2);cursor:pointer;position:relative;overflow:clip;z-index:1;outline:none;padding-inline:100px;padding-block:16px;transition:box-shadow .3s ease-in-out}.modal__button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--clr-linear-grad);z-index:-1;opacity:0;transition:opacity .3s ease}.modal__button:hover:before,.modal__button:focus-visible:before{opacity:1}.modal__button:hover,.modal__button:focus-visible{box-shadow:0 1rem 2rem var(--clr-btn-shadow)}.modal__email{font-weight:var(--fw-2)}.error{color:var(--clr-secondary);background-color:var(--clr-error-bg);outline:.125rem solid var(--clr-secondary)}.error:focus-visible{outline:.125rem solid var(--clr-secondary)}.attribution{position:absolute;inset-block-end:10px;inset-inline:0;font-size:12px;text-align:center;color:var(--clr-primary)}.attribution__link{border-radius:3px;color:var(--clr-primary);text-decoration:underline;transition:color .3s}.attribution__link:hover,.attribution__link:focus-visible{color:var(--clr-attr)}.attribution__link:focus-visible{outline:3px solid var(--clr-attr);outline-offset:2px}.sign-up{display:flex;flex-direction:column;row-gap:40px}.sign-up__content{display:flex;flex-direction:column;row-gap:24px}.sign-up__list{display:flex;flex-direction:column;row-gap:8px}.sign-up__list-item{display:flex;-moz-column-gap:16px;column-gap:16px}.sign-up__form{display:flex;flex-direction:column;row-gap:8px}.sign-up__label-content{display:flex;align-items:center;justify-content:space-between}.modal__content{display:flex;flex-direction:column;row-gap:32px}@container (width > 27.8125em){.modal__content{text-align:center}.modal__content{align-items:center}.modal__button{inline-size:85%}}@media (width > 48em){.body{background-color:var(--clr-bg);display:grid;place-content:center}.main{display:grid;place-content:center}.sign-up{background-color:var(--clr-light);border-radius:2.25rem;max-inline-size:38rem}.sign-up__picture{margin-inline:40px;margin-block-start:42.8px;inline-size:33rem;block-size:22.375rem}.sign-up__img{inline-size:33rem;block-size:22.375rem;-o-object-fit:cover;object-fit:cover;border-radius:1rem}.sign-up__content{padding-block-end:42.8px}.sign-up__form{margin-block-start:0}.sign-up__email{margin-block-end:8px}.modal{min-inline-size:unset;min-block-size:unset;inline-size:31.5rem;block-size:32.5rem;padding:60px;border-radius:2.25rem;position:fixed;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.modal::backdrop{background-color:var(--clr-bg);z-index:999}.modal__desc{margin-block-end:0;max-inline-size:unset}}@media (width > 75em){.sign-up{flex-direction:row-reverse;-moz-column-gap:64px;column-gap:64px;max-inline-size:56.5rem;block-size:40.0625rem;padding-inline:32px;padding-block:24px}.sign-up__content{padding:0;row-gap:32px;align-self:center;min-inline-size:23.5rem}.sign-up__picture{margin:0}.sign-up__img{block-size:37.0625rem}.sign-up__email{margin-block-end:16px}.sign-up__button{padding-inline:0px}.attribution,.attribution__link{color:var(--clr-light)}.attribution__link:hover,.attribution__link:focus-visible{color:var(--clr-attr-sec)}.attribution__link:focus-visible{outline:3px solid var(--clr-attr-sec)}}
