* {
	--link-color: #5b5b5b;

	font-family: 'Source Serif Pro', serif;
}

a {
  display: inline-block;
  position: relative;

  color: var(--link-color);

	text-decoration: none;

  transition: 0.2s;
}

a::before {
  content: "";

  color: white;

  background: linear-gradient(284deg, #e1ad2b, #8bc5d2, #d28bb9);
  background-size: 600% 600%;

  animation: slide 2s linear infinite;

  width: 100%;
  height: 1px;

  padding: 1px;

  position: absolute;
  bottom: 0;

  left: 0;
  right: 0;

  z-index: -1;

  transition: 0.4s;
}

a:hover::before, a:active::before, a:focus::before {
  padding: 0 2px;
  height: calc(100%);

  border: 1px solid rgba(255, 255, 255, 0.3);
  filter: blur(10px);
}

a:active::before {
  filter: blur(5px);
  background: #f2d799;
}

@keyframes slide {
0% {
  background-position: 0% 50%;
}

50% {
  background-position: 100% 50%;
}

100% {
  background-position: 0% 50%;
}
}