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

@layer components {
  .default-container {
    @apply mx-auto max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl 3xl:max-w-[1440px];
  }
}

.circle {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 4px solid white;
}

.card {
  background: linear-gradient(135deg, #ff9800, #e65100);
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out;
}
.card:hover {
  transform: scale(1.05);
}
.highlight {
  background: #ffd700;
  color: #d32f2f;
  padding: 3px 8px;
  border-radius: 5px;
}