html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #f4f4f4;
}

#root {
  min-height: 100vh;
}

.animate-in {
  animation-fill-mode: both;
}

.fade-in {
  animation-name: fadeIn;
}

.slide-in-from-bottom-4 {
  --enter-y: 1rem;
  animation-name: fadeIn, slideIn;
}

.slide-in-from-bottom-8 {
  --enter-y: 2rem;
  animation-name: fadeIn, slideIn;
}

.slide-in-from-right-4 {
  --enter-x: 1rem;
  animation-name: fadeIn, slideIn;
}

.zoom-in-95 {
  --enter-scale: 0.95;
  animation-name: fadeIn, zoomIn;
}

.fill-mode-both {
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    transform: translate3d(var(--enter-x, 0), var(--enter-y, 0), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(var(--enter-scale, 1));
  }
  to {
    transform: scale(1);
  }
}