html, body {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: Manrope;
  font-size: var(--font-size-base);
}

body:has(.modal) {
  overflow: hidden;

  header, footer {
    z-index: 1;
  }
}

P:first-of-type {
  margin-top: 0;
}
p:last-of-type {
  margin-bottom: 0;
}

.visually-hidden {
  visibility: hidden;
}

a {
  color: var(--black);
  text-decoration: underline;
}

.button--primary {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0.8em 1.5em;

  background: var(--primary);
  border: 2px solid var(--primary);
  color: var(--white);
  border-radius: 34px;
  text-decoration: none;
  font-weight: 700;

  transition: all var(--transition-duration);

  svg {
    margin-right: 1em;
  }

  &:hover {
    color: var(--primary);
    background-color: transparent;
  }
}

.button--white {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0.8em 1.5em;

  background: var(--white);
  border: 2px solid var(--white);
  color: var(--primary);
  border-radius: 34px;
  text-decoration: none;
  font-weight: 700;

  transition: all var(--transition-duration);

  svg {
    margin-right: 1em;
  }

  &:hover {
    color: var(--white);
    background-color: var(--primary);
  }
}

.menu-link {
  text-decoration: none;
}