@keyframes alias {
  0% {
    background-image: linear-gradient(to right, black 90%, white);
    color: white;
  }
  12% {
    background-image: linear-gradient(to right, black 80%, white);
    color: white;
  }
  24% {
    background-image: linear-gradient(to right, black 70%, white);
    color: white;
  }
  36% {
    background-image: linear-gradient(to right, black 60%, white);
    color: white;
  }
  48% {
    background-image: linear-gradient(to right, black 50%, white);
    color: white;
  }
  60% {
    background-image: linear-gradient(to right, black 40%, white);
    color: white;
  }
  72% {
    background-image: linear-gradient(to right, black 30%, white);
    color: white;
  }
  84% {
    background-image: linear-gradient(to right, black 20%, white);
    color: black;
  }
  100% {
    background-image: linear-gradient(to right, black 10%, white);
    color: black;
  }
}

.alias {
  animation-name: alias; /* note: exiting hover on mouse leave will reapply this animation/duration/count to the alias again */
  animation-duration: 2.1s;
  animation-iteration-count: 5;
}

/* Probably a better way to make sure the alias info 'hover tip' doesn't ever collide with other content? Even with a small or changing viewport? */
@media (any-hover: hover) and (min-width: 0px) and (max-width: 900px) {
  .alias:hover .aliasinfo {
    left: 65%;
  }
}
@media (any-hover: hover) and (min-width: 901px) and (max-width: 1500) {
  .alias:hover .aliasinfo {
    left: 63%;
  }
}
@media (any-hover: hover) and (min-width: 1501px) and (max-width: 100%) {
  .alias:hover .aliasinfo {
    left: 59%;
  }
}

@media (any-hover: hover) {
  .alias:hover .aliasinfo {
    display: initial;
    position: absolute;
    margin: 0;
    top: 0;
    width: 150px;
    font-size: x-small;
  }
  .alias:hover {
    animation-name: none;
    animation-duration: 0s;
    animation-iteration-count: 0;
  }
}

.aliasinfo {
  display: none;
}

.aliascontainer {
  position: relative; /* so that absolute positioning can be applied to the nested alias info and allow the header to center itself without accounting for alias info content */
}