@mixin page-content ($max-width : 75rem) {
  padding-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  max-width: $max-width;
  @media (min-width: $screen-sm) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  @media (min-width: $screen-md) {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@mixin heading-font () {
  font-family: "Josefin Sans", $base-font-family;
  text-transform: lowercase;
  font-weight: 700;
}

@mixin interesting-link ($position: 1em) {
  a {
    transition: background-position 0.15s 0.1s;
    background-image: linear-gradient(
      to bottom,
      var(--lighter-color) 0%,
      var(--lighter-color) 100%
    );
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 $position;
    &:hover {
      cursor: pointer;
      background-image: linear-gradient(
        to bottom,
        var(--lighter-color) 0%,
        var(--lighter-color) 100%
      );
      background-position: 0 0;
    }
  }
}
