/* styles.css */
html {
  scroll-behavior: smooth;
}

.card-option {
  cursor: pointer;
  user-select: none;
  letter-spacing: -.01em;
  background: #fff;
  border: 1.5px solid #e7e5e4;
  border-radius: .875rem;
  padding: .875rem 1rem;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  font-weight: 500;
}

.card-option:hover {
  background-color: #fff;
  border-color: #a8a29e;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px #0000000f;
}

.card-option:active {
  transform: translateY(0);
}

.card-option.selected {
  color: #14532d;
  background: linear-gradient(135deg, #f0fdf6, #dcfce9);
  border-color: #16a34a;
  box-shadow: 0 0 0 1px #16a34a, 0 1px 3px #16a34a1f;
}

.card-option.error {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp .6s cubic-bezier(.16, 1, .3, 1) forwards;
  opacity: 0;
}

.delay-100 {
  animation-delay: .1s;
}

.delay-200 {
  animation-delay: .2s;
}

.delay-300 {
  animation-delay: .3s;
}

.delay-400 {
  animation-delay: .4s;
}

.delay-500 {
  animation-delay: .5s;
}