@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
  --heroground: #e4e4df;
  --idein: #1d8275;
  --idein-550: #249fa0;
  --idein-400: #4ca0a0;
  --idein-300: #5bb1b1;
  --idein-200: #85d1d1;
  --idein-100: #a2c5c5;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-heroground: var(--heroground);
  --color-idein: var(--idein);
  --color-idein-500: var(--idein);
  --color-idein-550: var(--idein-550);
  --color-idein-400: var(--idein-400);
  --color-idein-300: var(--idein-300);
  --color-idein-200: var(--idein-200);
  --color-idein-100: var(--idein-100);
}

@custom-variant dark (&:where(.dark, .dark *));

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.text-gradient-1 {
  background: linear-gradient(to right, black, var(--idein));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
  background: linear-gradient(to right, #85d1d1, var(--idein));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-1 {
  background-image: url("/cards/bg-gradient-1.svg");
  background-size: cover;
  background-position: center;
}

.bg-gradient-2 {
  background-image: url("/cards/bg-gradient-2.svg");
  background-size: cover;
  background-position: center;
}

.scrollbar-none {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scrollbar-none::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}