Link

.page-title {
  width: auto;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
}

h1,
.page-title {
  font-family: $font-family-serif;

  @include media-breakpoint-down(md) {
    font-size: 2.875rem;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
}

h2,
.h2 {
  color: $lehigh_brown;
  font-size: 2.375em;
  font-weight: 400;

  @include media-breakpoint-down(md) {
    font-size: 2.25rem;
  }

  .right-content & {
    @include media-breakpoint-up(md) {
      font-size: 2rem;
    }
  }

  .color-scheme-dark & {
    color: $lehigh_brown_darkmode;
    color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
  }
}

h3,
.h3 {
  .right-content & {
    @include media-breakpoint-up(md) {
      font-size: 1.5rem;
    }
  }
}

h4,
.h4 {
  .right-content & {
    @include media-breakpoint-up(md) {
      font-size: 1.25rem;
    }
  }
}

a {
  color: $hyperlink;
  color: var(--hyperlink, $hyperlink);
  border-bottom: 2px solid $hyperlink;
  border-bottom: 2px solid var(--hyperlink, $hyperlink);
  text-decoration: none;
  font-weight: bold;
  @include transition;

  &:hover,
  &:focus {
    text-decoration: none;
    color: $black;
  }
}

blockquote,
.quote {
  color: $grey_darkest;
  text-align: center;
  font-size: 1.5rem;
  border-top: solid 3px $lehigh_brown;
  border-bottom: solid 3px $lehigh_brown;
  margin: $space_two;
  padding: $space_two;
  position: relative;

  &::before {
    content: "“";
    color: $lehigh_brown;
    font-size: 20rem;
    font-family: "Arial";
    opacity: 0.1;
    position: absolute;
    top: -110px;
    left: $space_neg_one;

    .color-scheme-dark & {
      color: $white;
      color: var(--white, $white);
      opacity: 0.2;
    }
  }

  &::after {
    content: "”";
    color: $lehigh_brown;
    font-size: 20rem;
    font-family: "Arial";
    opacity: 0.1;
    position: absolute;
    bottom: -250px;
    right: $space_neg_one;

    .color-scheme-dark & {
      color: $white;
      color: var(--white, $white);
      opacity: 0.2;
    }
  }

  .source {
    margin: 1rem 0 0 0;
    font-size: 1rem;
    color: $grey_darkest;
    font-style: italic;

    &::before {
      content: "- ";
    }

    .color-scheme-dark & {
      color: $white;
    }
  }

  .color-scheme-dark & {
    color: $white;
    border-top: solid 3px $lehigh_brown_darkmode;
    border-top: solid 3px var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
    border-bottom: solid 3px $lehigh_brown_darkmode;
    border-bottom: solid 3px var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
  }
}

pre {
  .color-scheme-dark & {
    color: $white;
  }
}

hr {
  .color-scheme-dark & {
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
}