h1 {
  color: brown;
}

.subtitle {
  display: inline-block;
  perspective: 600px;
  cursor: help;
}

.subtitle span {
  display: inline-block;
  white-space: pre;
  transform-origin: center;
  transition: none;
}

@keyframes letter-chaos {
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: hue-rotate(0deg);
  }

  10% {
    transform: translate(calc(var(--i) * 2px - 8px), -6px) rotate(15deg) scale(1.2);
    filter: hue-rotate(90deg);
  }

  25% {
    transform: translate(calc(var(--i) * -3px + 10px), 8px) rotate(-22deg) scale(0.85);
    filter: hue-rotate(180deg);
  }

  45% {
    transform: translate(calc(var(--i) * 4px - 12px), -14px) rotate(35deg) scale(1.4);
    filter: hue-rotate(270deg) blur(1px);
  }

  60% {
    transform: translate(calc(var(--i) * -2px + 6px), 12px) rotate(-18deg) scale(0.9);
    filter: hue-rotate(360deg);
  }

  80% {
    transform: translate(calc(var(--i) * 3px - 9px), -4px) rotate(28deg) scale(1.15);
    filter: hue-rotate(450deg);
  }

  100% {
    transform: translate(0, 0) rotate(0) scale(1);
    filter: hue-rotate(720deg);
  }
}

@keyframes barrel-roll {
  0% {
    transform: rotateY(0) rotateZ(0) skewX(0);
    color: inherit;
  }

  20% {
    transform: rotateY(180deg) rotateZ(-8deg) skewX(8deg);
    color: magenta;
  }

  40% {
    transform: rotateY(360deg) rotateZ(12deg) skewX(-12deg);
    color: cyan;
  }

  60% {
    transform: rotateY(540deg) rotateZ(-6deg) skewX(6deg);
    color: yellow;
  }

  80% {
    transform: rotateY(720deg) rotateZ(4deg) skewX(-4deg);
    color: red;
  }

  100% {
    transform: rotateY(720deg) rotateZ(0) skewX(0);
    color: inherit;
  }
}

@keyframes glitch-shadow {

  0%,
  100% {
    text-shadow: none;
  }

  20% {
    text-shadow: 2px 0 magenta, -2px 0 cyan;
  }

  40% {
    text-shadow: -3px 1px magenta, 3px -1px cyan, 0 0 8px white;
  }

  60% {
    text-shadow: 4px -2px yellow, -4px 2px red;
  }

  80% {
    text-shadow: 1px 1px blue, -1px -1px green;
  }
}

.subtitle:hover {
  animation: barrel-roll 2s 2s ease-in-out infinite, glitch-shadow 0.15s 2s steps(2) infinite;
}

.subtitle:hover span {
  animation: letter-chaos 1.2s 2s ease-in-out infinite;
  animation-delay: calc(2s + var(--i) * 0.04s);
}

ul {
  padding: 0;
}

li.post {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.75em 0;

  font-size: 1.125rem;

  a {
    margin-right: auto;
  }

  time {
    color: var(--color-muted);
    font-size: 0.8em;
    white-space: nowrap;
  }
}