@keyframes slide-in-from-left {
  0% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    left: -2em;
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

.bubble {
  animation: 1s ease-out 0s 1 slide-in-from-left;
  position: relative;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  padding: 1.5em 3em;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: var(--glass-border);
  box-shadow: var(--shadow-strong);
  width: min(90vw, 720px);

  /* ensures the bubble doesn't overflow the hero */
  max-width: 40vw;
  display: inline-block;
  border-radius: var(--radius);
  text-align: left;
}

.bubble .name {
  margin: 0;
  color: var(--on-hero);
  text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
  font-weight: 700;
}

@media screen and (width <= 736px) {
  .bubble {
    left: 2.5em;
  }

  .checklist {
    left: 3em;
  }
}

@media screen and (width <= 600px) {
  .bubble {
    padding: 1em 1.5em;
  }
}

@media screen and (width <= 480px) {
  .bubble {
    left: 1em;
    padding: 0.5em 1em;
  }
}