@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.warning-banner {
  animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.warning-stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 193, 7, 0.3) 10px,
    rgba(255, 193, 7, 0.3) 20px
  );
}

.tip-card {
  transition: transform 0.3s ease;
}

.tip-card:hover {
  transform: translateY(-4px);
}

.generate-button {
  animation: wiggle 3s ease-in-out infinite;
}

.generate-button:hover {
  animation: wiggle-fast 0.5s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  75% {
    transform: rotate(1deg);
  }
}

@keyframes wiggle-fast {
  0%, 100% {
    transform: rotate(0deg) scale(1.05);
  }
  25% {
    transform: rotate(-2deg) scale(1.05);
  }
  50% {
    transform: rotate(2deg) scale(1.05);
  }
  75% {
    transform: rotate(-2deg) scale(1.05);
  }
}

@media (max-width: 640px) {
  .tip-card p {
    font-size: 1.25rem;
  }
}