html {
  font-size: 100%;
}

body {
  font-family: $primary-font-stack;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  color: $primary-font-color;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: .25rem;
  color: $primary-accent-color;
  font-family: $primary-font-stack;
  font-weight: 700;
}

h2 {
  font-size: rem(21);
  @include breakpoint-min($desktop-breakpoint) {
    font-size: rem(28);
  }
}

h3 {
  font-size: rem(16);

  @include breakpoint-min($tablet-breakpoint) {
    font-size: rem(21);
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: $transition-time all;

  &:hover,
  &:focus,
  &:active {
    color: inherit;
    text-decoration: none;
  }
}

%lead-text {
  font-size: rem(21);
  line-height: rem(30);
  font-weight: 300;

  @include breakpoint-min($small-breakpoint) {
    font-size: rem(26);
    line-height: rem(32);
  }

  @include breakpoint-min($desktop-breakpoint) {
    font-size: rem(32);
    line-height: rem(46);
  }
}

p {
  font-size: rem(14);
  line-height: 1.5;
  font-family: $secondary-font-stack;
  margin-bottom: 15px;

  @include breakpoint-min($desktop-breakpoint) {
    font-size: rem(18);
  }

  &.lead-text {
    @extend %lead-text;
  }
}

.about-text {

  @include breakpoint-min($tablet-breakpoint) {
    margin: 0 auto;
  }

  // @include breakpoint-min($lg-desktop-breakpoint) {
  //   &--offset-left {
  //     transform: translateX(-50px);
  //   }

  //   &--offset-right {
  //     transform: translateX(50px);
  //   }
  // }

  > p {
    @extend %lead-text;

    @include breakpoint-min($small-breakpoint) {
      font-size: rem(24);
      line-height: rem(30);
    }

    @include breakpoint-min($desktop-breakpoint) {
      font-size: rem(26);
      line-height: rem(40);
    }

    @media screen and (max-height: 700px) {
      font-size: 1.5rem;
    }
  }
}