.toc {
  padding-bottom: 5px;
  border-bottom: 2px solid $dark;
  a {
    color: $dark;
    text-decoration: underline;
  }
}
.frontmatter {
  padding: 15px 0px 7px 0px;
  border-bottom: 2px solid $dark;

  a:not(.button) {
    color: $dark;
    text-decoration: none;
    background-image: linear-gradient(
      120deg,
      $gradient-left 0%,
      $gradient-right 100%
    );
    background-repeat: no-repeat;
    background-size: 0 0;
    background-position: 100% 21%;
    transition: 0.15s ease-out;
    border-radius: 5px;
    padding-left: 4px;
    margin-left: -3px;
    &:hover {
      background-size: 100% 100%;
      color: $light;
      &:after {
        color: $gradient-right;
      }
    }
    &::after {
      position: relative;
      content: "\FEFF°";
      margin-left: 0.1em;
      font-size: 90%;
      top: -0.1em;
      color: $light-highlight;
      font-feature-settings: "caps";
      font-variant-numeric: normal;
    }
  }

  .post-title {
    margin: 10px 0;
    a {
      text-decoration: none;
      background-image: none;
      &::after {
        content: "";
      }
      &:hover {
        background-size: 0 0;
        color: $dark;
      }
    }
  }
  p {
    margin: 0 0;
  }
}

.content {
  h2,
  h3 {
    margin-top: 20px;
    margin-bottom: -10px;
  }
  h2,
  h3,
  p,
  li,
  td {
    a {
      color: $dark;
      text-decoration: none;
      background-image: linear-gradient(
        120deg,
        $gradient-left 0%,
        $gradient-right 100%
      );
      background-repeat: no-repeat;
      background-size: 0 0;
      background-position: 100% 21%;
      transition: 0.15s ease-out;
      border-radius: 5px;
      padding-left: 4px;
      margin-left: -3px;
      &:hover {
        background-size: 100% 100%;
        color: $light;
        &:after {
          color: $gradient-right;
        }
      }
      &::after {
        position: relative;
        content: "\FEFF°";
        margin-left: 0.1em;
        font-size: 90%;
        top: -0.1em;
        color: $light-highlight;
        font-feature-settings: "caps";
        font-variant-numeric: normal;
      }
    }
  }
  .footnote-ref {
    background-size: 100% 1.5px;
    background-position: 0 90%;
    &::after {
      content: "";
    }
    &:hover {
      background-size: 100% 100%;
      color: $light;
    }
  }
  .footnote-backref {
    background-size: 100% 1.5px;
    background-position: 0 90%;
    &::after {
      content: "";
    }
    &:hover {
      background-size: 100% 100%;
      color: $light;
    }
  }
  .highlight {
    a {
      background-image: none;
      &::after {
        content: "";
      }
    }
  }
  .anchor-tag {
    font-size: 70%;
    position: relative;
    bottom: 2.6px;
    background-size: 100% 0;
    background-position: 0 150%;
    &::after {
      content: "";
    }
  }
}
.commento-root-font * {
  font-family: Heliotrope !important;
}
.commento-footer {
  display: none;
}