// 🎌 ADAPTIVE REM BASED SIZING 🎌
html{
  font-size: 14px;
  @include responsive(medium-screens){
    font-size: 16px;
  }
  @include responsive(wide-screens){
    font-size: 20px;
  }
  // @include responsive(ultra-wide-screens){
  //   font-size: 24px;
  // }
  // @include responsive(extra-ultra-wide-screens){
  //   font-size: 30px;
  // }
  // @include responsive(extra-extra-ultra-wide-screens){
  //   font-size: 40px;
  // }
  &.wf-loading{
    opacity: 0;
  }
  &.wf-active{
    opacity: 1;
    display: block;
    font-family: 'Alegreya', 'Georgia', serif;
  }
  &.wf-inactive, &.wf-fontinactive{
    opacity: 1;
    display: block;
    font-family: 'Georgia', serif;
  }
}

// 🎌 PSUEDO TYPOGRAPHIC MODULAR SCALE BASED ON A 1.5 RATIO 🎌
body {
  font-weight: 400;
  line-height: 1.45;
  color: $black;
  font-size: 1rem;
}

p {
  margin-bottom: 1.3rem;
}

h1, h2, h3, h4 {
  margin: 1.414Rem 0 0.5rem;
  font-weight: inherit;
  line-height: 1.2;
}

h1 {
  margin-top: 0;
  font-size: 5.063rem;
}

h2 {
  font-size: 3.375rem;
}

h3 {
  font-size: 2.25rem;
}

h4 {
  font-size: 1.5rem;
}

small, .font_small {
  font-size: 0.667rem;
}