*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font: normal 16px "Open Sans", sans-serif;
  color: var(--csno-text);
  background: var(--csno-background);
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  background-size: cover;
  background: var(--csno-background-image-page) no-repeat top center;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2rem;
}

footer {
  background: #ffffff;
  color: #2f2f2f;
  padding: 1.25rem;
  font-size: 0.85rem;
}

footer p {
  text-align: center;
  font-weight: 300;
}

a {
  color: var(--csno-link);
}

footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  margin-top: 1rem;
}

footer nav a {
  font-weight: 700;
  color: #6F6D6D;
  text-decoration: none;

}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  background: var(--csno-cta-background);
  color: var(--csno-cta-text);
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

.unsubscribe {
  fieldset {
    border: none;
    margin: 1.25rem 0 0;
  }

  h1 {
    color: #ffffff;
  }

  h2 {
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .row {
    flex-direction: column;
  }

  footer nav {
    gap: 2rem;
  }
}