*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--tomato: hsl(4, 100%, 67%);--error: hsl(5, 100%, 95%);--darkSlateGrey: hsl(234, 29%, 20%);--charcoalGrey: hsl(235, 18%, 26%);--grey: hsl(231, 7%, 60%);--white: hsl(0, 0%, 100%)}body{font-family:Roboto,sans-serif;font-size:16px;display:grid;place-content:center;height:100vh;background:var(--charcoalGrey);padding:1rem}body .attribution{font-size:11px;text-align:center;color:#fff}body .attribution a{color:var(--tomato)}body .card{display:grid;grid-auto-columns:1fr;gap:1rem;padding:1rem;width:100%;place-content:center;max-width:900px;background:var(--white);border-radius:15px;margin:1rem 2rem;grid-area:card;grid-template-areas:"card image"}body .card.thank-you{display:none;max-width:500px;grid-area:thankyou}body .card .flex{display:flex;flex-direction:column;justify-content:space-between}body .card .card-body{justify-content:space-around;gap:1rem;margin:4rem 3rem}body .card .card-body h1{font-size:3.3rem;font-weight:700;color:var(--darkSlateGrey)}body .card .card-body p,body .card .card-body ul li{font-size:1rem;color:var(--charcoalGrey)}body .card .card-body ul li{font-size:.9rem;position:relative;margin:1rem 0}body .card .card-body ul li:before{content:url(../images/icon-success.svg);color:var(--tomato);position:absolute;scale:.4;top:-110%;left:-3.5rem}body .card .card-body #sign-up-form .email{flex-direction:row}body .card .card-body #sign-up-form .email label{color:var(--darkSlateGrey);font-weight:700;font-size:.8rem}body .card .card-body #sign-up-form .email label#email-error{display:none;color:var(--tomato)}body .card .card-body #sign-up-form #email{outline:none}body .card .card-body #sign-up-form #email:focus{border:2px solid var(--grey)}body .card .card-body #sign-up-form #email.submitted:invalid{border:none;outline:3px solid var(--tomato);color:var(--tomato);background:var(--error)}body .card .card-body #sign-up-form input{padding:1rem;border-radius:5px;border:1px solid var(--grey);font-size:.9rem;color:var(--darkSlateGrey)}body .card .card-body #sign-up-form input:focus{border:1px solid var(--tomato)}body .card .card-body button{width:100%;padding:1rem;margin-top:2rem;border-radius:5px;border:none;background:var(--darkSlateGrey);color:var(--white);font-size:.9rem;font-weight:700;cursor:pointer}body .card .card-body button:hover{background:#f10}body .card .sign-up-img{background-image:url(../images/illustration-sign-up-desktop.svg);background-size:cover;aspect-ratio:400/593;grid-area:image}@media screen and (max-width: 950px){body .card{gap:0;grid-template-areas:"image" "card";max-width:90%;margin:1rem auto}body .card .card-body{margin:2rem 1rem}body .card .card-body h1{font-size:2.5rem}body .card .card-body p{font-size:.9rem}body .card .card-body ul li{font-size:.8rem}body .card .card-body button{margin-top:1rem}body .card .sign-up-img{background-image:url(../images/illustration-sign-up-mobile.svg);aspect-ratio:375/400}}