@mixin base-text() {
  color: $base-font-color;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: $base-line-height;
  font-weight: $base-font-weight;
}

html,
body,
input,
textarea {
  @include base-text();
}

p {
  font-size: 1.3rem;
  color: #212529;
  line-height: 2rem;
}

.preamble p {
  color: #777777;
  font-family: Source Sans Pro;
  font-size: 2em;
  line-height: 1.3em;
  font-weight: 300;
}

h1 {
  font-size: 47px;
  letter-spacing: 2px;
  line-height: 50px;
  margin-bottom: 1%;
  margin-top: 0;
  text-transform: capitalize;

  @include breakpoint($screen-m) {
    font-size: 50px;
    line-height: 60px;
  }

  @include breakpoint($screen-l) {
    font-size: 55px;
  }
}

h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1%;
  margin-top: 0;

  @include breakpoint($screen-m) {
    font-size: 34px;
  }
}

h3 {
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1%;
  margin-top: 0;
}

h4 {
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: normal;
  margin-bottom: 1%;
  margin-top: 0;
  text-transform: uppercase;
}

h5 {
  font-size: 21px;
  font-weight: 300;
  line-height: 28px;
  margin-bottom: 1%;
  margin-top: 0;
  letter-spacing: 0.09px;

  @include breakpoint($screen-l) {
    font-size: 22px;
  }
}

a {
  color: $color-purple;
  font-weight: 700;
  text-decoration: none;
  &:hover {
    color: $color-green;
  }
}

b {
  font-weight: 700;
}

.bold {
  font-weight: 700;
}

.green {
  color: $color-green;
}

.lime {
  color: $color-lime;
}

.light {
  font-weight: 200;
}

.email {
  font-weight: 700;
}

.small {
  font-size: 14px;
}

.strong {
  color: $color-purple;
  font-weight: 700;
}

.tiny {
  font-size: 12px;
}

.background-grey {
  color: $color-very-dark-grey;
  font-size: 80px;
  font-weight: bold;
}
