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

:host {
  display: inline-block;
}

midwest-animate-text {
  display: inline-block;
  position: relative;
  contain: content;
}

midwest-animate-text .letter {
  display: inline-block;
}

midwest-animate-text .letter {
  opacity: 0;
  will-change: opacity transform;
}

midwest-animate-text[method="retro"] .letter:not(:first-of-type) {
  position: absolute;
  top: calc(var(--iteration) * 7vh);
  left: 0;
  right: 0;
  color: var(--complement-5);
  z-index: calc(-1 * var(--iteration));
  mix-blend-mode: color;
}

midwest-animate-text[method="retro"] .letter:first-of-type {
  z-index: 3;
}

midwest-animate-text[method="retro"] .letter:nth-of-type(2) {
  top: 0;
}