body {
  line-height: 2;
}

body.dark {
  --bg-color: #000;
  --bg-secondary-color: #262626;
  --font-color: #f5f5f5;
  --color-grey: #bbb;
  --color-darkGrey: #888;
  --color-primary: #17c16f;
  --color-error: #ea4f4f;
}

body > .container {
  max-width: 720px;
}

.hero {
  display: flex;
  flex-direction: column;
}

.logo {
  flex: 1;
  flex-direction: column;
}

.logo svg {
  width: 100%;
  max-width: 300px;
}

.logo h3 {
  font-weight: 300;
}

.z {
  color: #a00;
}

body > footer {
  background-color: #f8f8f8;
  padding: 4rem;
}

body.dark > footer {
  background-color: #222222;
}

section {
  margin: 5rem auto;
}

hr {
  margin: 3rem 0;
}