@keyframes background {
  0%   { background-color: hsl(60, 7%, 92%); }
  25%  { background-color: hsl(28, 37%, 92%); }
  50%  { background-color: hsl(105, 7%, 88%); }
  75%  { background-color: hsl(26, 70%, 91%); }
  100% { background-color: hsl(60, 7%, 92%); }
}

@keyframes color {
  0%   { color: hsl(158, 75%, 14%); }
  25%  { color: hsl(5, 36%, 21%); }
  50%  { color: hsl(158, 75%, 14%); }
  75%  { color: hsl(18, 82%, 29%); }
  100% { color: hsl(158, 75%, 14%); }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 2vw;
  font-family: monospace;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 100%);
}

.o-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: hsl(60, 7%, 92%);
  animation: background 30s infinite linear;
}

.c-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 5vw;
  line-height: 1.2;
  text-decoration: none;
  color: hsl(158, 75%, 14%);
  animation: color 30s infinite linear;
}

.c-link::after {
  content: "";
  position: absolute;
  top: calc(100% + .1em);
  left: 0;
  width: 100%;
  height: .05em;
  opacity: 0;
  background: currentColor;
  transform: translateY(-.2em);
  transition: transform .4s ease-in-out, opacity .2s linear;
}

.c-link:focus::after,
.c-link:hover::after {
  opacity: .2;
  transform: translateY(0);
}