/*sets button letter spacing*/
.stripped-button a, .source-btn {letter-spacing: 3px!important}
.pc-button.custom-size-btn {letter-spacing:3px}

/*resets header letter spacing*/
.space1 h1,h2,h3,h4,h5,h6 {letter-spacing:0px!important}

/* Animated link code below */
/* linko is a similer 2 colour animation */
.linko a {
  color: var(--text-color-normal)!important;
  text-decoration: none;
  background-image: linear-gradient(var(--button-primary-color-hover), var(--button-primary-color-hover)),
    linear-gradient(var(--accent-color), var(--accent-color));
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}

.linko a:hover {
  background-size: 0 2px, 100% 2px;
}
/* linkr is linko in reverse */
.linkr a {
  color: var(--text-color-normal)!important;
  text-decoration: none;
  background-image: linear-gradient(var(--button-primary-color-hover), var(--button-primary-color-hover)),
    linear-gradient(var(--accent-color), var(--accent-color));
  background-size: 100% 2px, 0 2px;
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
}

.linkr a:hover {
  background-size: 0 2px, 100% 2px;
}

/* linko2 is a 3 colour animation */
.linko2 a {
  color: var(--accent-color)!important;
  text-decoration: none;
  background-image: linear-gradient(var(--second-color), var(--second-color)), linear-gradient(var(--button-primary-color-hover), var(--button-primary-color-hover)), linear-gradient(var(--accent-color), var(--accent-color));
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s linear, background-position 0.5s linear;
}

.linko2 a:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}