@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Butcherman&family=Creepster&display=swap");

/* Override width to give us some more room. */
body main .max-w-prose {
  max-width: 120ch;
}

.drippies-container {
  position: absolute;
  top: calc(100% - 5px);
  width: 100%;
  transform-origin: top;
  z-index: -1;

  svg {
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    animation: fade-out 1s forwards;
    transform-origin: top;
  }
  a:hover ~ & svg {
    animation: drip-in 3s ease-in forwards;
  }
}


@keyframes drip-in {
    from {
        opacity: 1;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}
@keyframes fade-out {
    from {
        opacity:1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(0);
    }
}