body {
  max-width: 800px;
  margin: 2em;

  color: #333333;
  font-family: "Vollkorn", serif;
}

/* Bottom border that turns into background block */
a:link::before {
  position: absolute;
  bottom: 2px;
  left: 0;

  display: block;

  z-index: -1;

  width: 100%;
  height: 1px;

  background-color: #00a9ff;

  content: '';

  transition: all 200ms;
}

/* Link styles */
a:link {
  position: relative;
  color: #00a9ff;
  text-decoration: none;
}

a:visited {
  color: #d84df7;
}
a:visited::before {
  background-color: #d84df7;
}
a:hover,
a:focus {
  color: white;
  outline: none;
  transition: all 200ms;
}
a:active {
  top: 2px;
  left: 1px;
}
a:hover::before,
a:focus::before,
a:active::before {
  height: calc(100% - 2px);
  transition: all 200ms;
}