@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes blob {
  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

@layer components {
  /* Fix autofill for text inputs (from previous fixes) */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #111827 !important; /* Tailwind's gray-900 */
  }

  /* Fix checkbox background */
  input[type="checkbox"] {
    background-color: white !important; /* White background when unchecked */
    border-color: #d1d5db !important; /* Tailwind's gray-300 */
  }

  input[type="checkbox"]:checked {
    background-color: #4f46e5 !important; /* Tailwind's indigo-600 */
    border-color: #4f46e5 !important;
  }
}



.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}


:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(0, 0, 0, 0.87);
  background-color: #f4f4f4;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}



h1 {
  font-size: 3.2em;
  line-height: 1.1;
}


button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: none;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }

  



}
