1  :root {
  2      --black: #000000;
  3      --white: #ffffff;
  4      --body: #e9e9e9;
  5  }
  6  
  7  html {
  8      font-size: 100%;
  9  }
 10  
 11  *, ::after, ::before {
 12      box-sizing: border-box;
 13  }
 14  
 15  @font-face {
 16      font-family: 'OpenSans';
 17      src: url('OpenSans-Variable.ttf') format('truetype');
 18  }
 19  
 20  body {
 21      font-family: 'Open Sans', sans-serif;
 22      background-color: var(--black);
 23      color: var(--body);
 24      background-image: url('bg-pattern.png');
 25      background-attachment: fixed;
 26      font-weight: 400;
 27      line-height: 1.3;
 28      padding-bottom: 13rem;
 29  }
 30  
 31  @media screen and (min-width: 768px) {
 32      body {
 33          padding-bottom: 0;
 34      }
 35  }
 36  
 37  h1 {
 38      font-size: 3rem;
 39      font-weight: 400;
 40      margin-bottom: 2rem;
 41      text-align: center;
 42      line-height: 1;
 43      color: var(--white);
 44  }
 45  
 46  
 47  h2 {
 48      font-size: 1rem;
 49      font-weight: 700;
 50      text-align: center;
 51      margin-bottom: 2rem;
 52      color: var(--white)
 53  }
 54  
 55  @media screen and (min-width: 768px) {
 56      h1 {
 57          font-size: 4rem;
 58      }
 59  
 60      h2 {
 61          font-size: 1.5rem;
 62      }
 63  }
 64  
 65  h3 {
 66      font-size: 2rem;
 67      font-weight: 700;
 68      margin-bottom: 2rem;
 69      text-align: center;
 70  }
 71  
 72  section {
 73      padding: 2rem 0
 74  }
 75  
 76  .container {
 77      width: 100%;
 78      margin: 0 auto;
 79      padding: 0 1rem;
 80  }
 81  
 82  @media screen and (min-width: 992px) {
 83      .container {
 84          max-width: 960px;
 85      }
 86  }
 87  
 88  .container-wide {
 89      width: 100%;
 90      margin: 0 auto 0 auto;
 91      padding: 0 1rem 0 1rem
 92  }
 93  
 94  p,
 95  li {
 96      margin-bottom: 1rem;
 97  }
 98  
 99  ol {
100      list-style-type: decimal;
101      list-style-position: inside;
102      padding: 0;
103  }
104  
105  .button {
106      text-decoration: none;
107      text-transform: uppercase;
108      font-weight: 500;
109      font-size: 1.5rem;
110      padding: 1.2rem 1.8rem;
111      display: inline-block;
112      color: var(--white);
113      cursor: pointer;
114      background: rgb(53, 80, 132);
115      border-radius: 12px;
116      transition: 0.2s ease-in-out;
117      will-change: background;
118      border: 2px solid #627eea;
119      box-shadow: 0 0 14px rgba(99, 189, 249, 0.59);
120      background: linear-gradient(rgba(98, 126, 234, 0.35) 0%, rgba(49, 63, 117, 0.35) 100%);
121      position: relative;
122  }
123  
124  .button:hover {
125      background: linear-gradient(rgba(98, 126, 234, 0.4) 0%, rgba(49, 63, 117, 0.4) 100%);
126      box-shadow: 0 0 10px rgba(99, 189, 249, 0.79);
127      color: var(--white)
128  }
129  
130  .button:active {
131      transform: translateY(2px);
132      color: var(--white)
133  }
134  
135  header {
136      margin-bottom: 1rem;
137      padding: 2rem 0;
138      text-align: center;
139  }
140  
141  @media screen and (min-width: 992px) {
142      header {
143          padding: 3rem 0;
144      }
145  }
146  
147  .button.header__cta {
148      margin: 30px auto 0 auto;
149  }
150  
151  .social__list {
152      align-items: center;
153      display: flex;
154      flex-direction: column;
155  }
156  
157  .social__list__link {
158      color: var(--body);
159      font-size: 2rem;
160  }
161  
162  .how-it-works__image {
163      max-width: 100%;
164      width: 100%;
165      height: auto;
166      margin-top: 2rem;
167  }