body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: var(--background-outer);
}

a {
  color: var(--link);
  text-decoration: none;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 0.25s ease-in-out;
  background-image: linear-gradient(var(--link-underline), var(--link-underline));
}

a:hover {
  background-size: 100% 2px;
}

/* set an anchor's class to `no-underline` to disable all of the above */
a.no-underline {
  background: none !important;
  padding-bottom: 0;
  transition: none;
}

/* make SVG icons relative in size/position to surrounding text */
.icon {
  display: inline-block;
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.2em;
}

/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}