.header {
  .title {
    font-family: $title-font;
    font-weight: 900;
  }
}

.site-header {
  @include flexbox();
  @include justify-content(center);
  @include flex-direction(column);

  &[data-ani="true"] {
    @include animation('fade-in .15s .1s 1 ease-in both');
  }

  &__title {
    line-height: 1.1;
    font-weight: 700;
    font-family: $title-font;

    &--shadow {
      @include themify($themes) {
        color: themed('terms-title-color');
        text-shadow: 1.2px 1.2px 0 themed('terms-title-color'),
          2.4px 2.4px 0 lighten(themed('terms-title-shadow-color'), 4%),
          3.6px 3.6px 0 lighten(themed('terms-title-shadow-color'), 8%),
          4.8px 4.8px 0 lighten(themed('terms-title-shadow-color'), 12%);
      }
    }
  }

  &__subtitle {
    line-height: 1.2;
    &[data-cursive="true"] {
      font-family: $cursive-font; 
    }
  }

  &__align-left {
    @include align-items(flex-start);
  }

  &__align-center {
    @include align-items(center);
  }

  &__align-right {
    @include align-items(flex-end);
  }
}