styles.css
1 :root{--black:#000000;--white:#ffffff;--body:#e9e9e9}html{font-size:100%}*,::after,::before{box-sizing:border-box}@font-face{font-family:OpenSans;src:url('OpenSans-Variable.ttf') format('truetype')}body{font-family:'Open Sans',sans-serif;background-color:var(--black);color:var(--body);background-image:url('bg-pattern.png');background-attachment:fixed;font-weight:400;line-height:1.3;padding-bottom:13rem}@media screen and (min-width:768px){body{padding-bottom:0}}h1{font-size:3rem;font-weight:400;margin-bottom:2rem;text-align:center;line-height:1;color:var(--white)}h2{font-size:1rem;font-weight:700;text-align:center;margin-bottom:2rem;color:var(--white)}@media screen and (min-width:768px){h1{font-size:4rem}h2{font-size:1.5rem}}h3{font-size:2rem;font-weight:700;margin-bottom:2rem;text-align:center}section{padding:2rem 0}.container{width:100%;margin:0 auto;padding:0 1rem}@media screen and (min-width:992px){.container{max-width:960px}}.container-wide{width:100%;margin:0 auto 0 auto;padding:0 1rem 0 1rem}li,p{margin-bottom:1rem}ol{list-style-type:decimal;list-style-position:inside;padding:0}.button{text-decoration:none;text-transform:uppercase;font-weight:500;font-size:1.5rem;padding:1.2rem 1.8rem;display:inline-block;color:var(--white);cursor:pointer;background:#355084;border-radius:12px;transition:.2s ease-in-out;will-change:background;border:2px solid #627eea;box-shadow:0 0 14px rgba(99,189,249,.59);background:linear-gradient(rgba(98,126,234,.35) 0,rgba(49,63,117,.35) 100%);position:relative}.button:hover{background:linear-gradient(rgba(98,126,234,.4) 0,rgba(49,63,117,.4) 100%);box-shadow:0 0 10px rgba(99,189,249,.79);color:var(--white)}.button:active{transform:translateY(2px);color:var(--white)}header{margin-bottom:1rem;padding:2rem 0;text-align:center}@media screen and (min-width:992px){header{padding:3rem 0}}.button.header__cta{margin:30px auto 0 auto}.social__list{align-items:center;display:flex;flex-direction:column}.social__list__link{color:var(--body);font-size:2rem}.how-it-works__image{max-width:100%;width:100%;height:auto;margin-top:2rem}