h1, h2, h3, h4, h5, h6 {
  font-family: var(--app-font-head);
  font-weight: 500;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

a {
  color: var(--app-color-primary);
  text-decoration: none;

  &:hover, &:focus, &:active {
    color: var(--app-color-primary-shade);
    text-decoration: underline;
    border: none;
    background: none;
    outline: 0;
  }

  &.muted {    
    color: var(--app-color-foreground);
    
    &:hover, &:focus, &:active {
      color: var(--app-color-foreground-shade);
      text-decoration: none;
    }
  }
}