@import "../common/font_styling";

.right p:first-of-type,
#anarchy p:first-of-type,
.leftintro p:first-of-type {
  text-indent: 1.3vw;
}

.title-container h1 {
  @include title-text(14.5vw, 12vw);

  @media (min-device-width: 200px) and (max-width: 600px) {
    @include title-text(14.5vw, 12vw);
  }
  @media (min-width: 601px) and (max-width: 1023px) {
    @include title-text(12.5vw, 11vw);
  }
  @media (min-width: 1024px) and (max-width: 1200px) {
    @include title-text(11vw, 9vw);
  }
  @media (min-width: 1201px) and (max-width: 1670px) {
    @include title-text(9vw, 9vw);
  }
  @media (min-width: 1671px) {
    @include title-text(7vw, 1.1);
  }
}

.title-container h4 {
  @include subtitle-text(5.5vw, 9vw);

  @media (min-device-width: 200px) and (max-width: 600px) {
    @include subtitle-text(5.5vw, 9vw);
  }
  @media (min-width: 601px) and (max-width: 1023px) {
    @include subtitle-text(5vw, 9vw);
  }
  @media (min-width: 1024px) and (max-width: 1200px) {
    @include subtitle-text(4vw, 2vw);
  }
  @media (min-width: 1201px) and (max-width: 1670px) {
    @include subtitle-text(4vw, 2vw);
  }
  @media (min-width: 1671px) {
    @include subtitle-text(3vw, 1vw);
  }
}

.rightintro h3 {
  @include intro-header(12vw, 1.3);

  @media (min-device-width: 200px) and (max-width: 600px) {
    @include intro-header(12vw, 1.3);
  }
  @media (min-width: 601px) and (max-width: 1023px) {
    @include intro-header(12vw, 1.3);
  }
  @media (min-width: 1024px) and (max-width: 1200px) {
    @include intro-header(12vw, 1.3);
  }
  @media (min-width: 1201px) and (max-width: 1670px) {
    @include intro-header(6vw, 1.3);
  }
  @media (min-width: 1671px) {
    @include intro-header(6vw, 1.3);
  }
}

#takeflight h1 {
  @include takeflight(18.5vw, 1.3);

  @media (min-device-width: 200px) and (max-width: 600px) {
    @include takeflight(18.5vw, 1.3);
  }
  @media (min-width: 601px) and (max-width: 1023px) {
    @include takeflight(18.5vw, 1.3);
  }
  @media (min-width: 1024px) and (max-width: 1200px) {
    @include takeflight(18.5vw, 1.3);
  }
  @media (min-width: 1201px) and (max-width: 1670px) {
    @include takeflight(15vw, 1.3);
  }
  @media (min-width: 1671px) {
    @include takeflight(15vw, 1.3);
  }
}
