html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  color: var(--color-font);
  margin: 0;
  box-sizing: border-box;
  font-family: var(--global-font-family), "Segoe UI", Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: var(--global-font-size);
  font-weight: var(--global-font-weight);
}

body ::selection {
  color: #fff;
  background: var(--color-primary-accent);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  border: none;
}

h1,
p {
  margin: 0;
}

p {
  line-height: var(--global-line-height);
}

h1 {
  font-size: var(--global-h1-size);
  line-height: unset;
}

a {
  text-decoration: none;
}

.container {
  margin: 0 auto;
  max-width: var(--global-max-site-width);
  padding: 0 var(--global-container-padding);
  position: relative;
}

.heading-with-underline:after {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  margin: 20px auto 0 auto;
}

.heading-with-underline-primary:after {
  background: var(--color-primary);
}

.scroll-snap-proximity {
  scroll-snap-type: y proximity;
}

.scroll-snap-mandatory {
  scroll-snap-type: y mandatory;
}