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

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 1s ease-out; }


/* samesee */
@keyframes shakeAnim {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.shake {
  animation: shakeAnim 0.1s infinite;
}


/* recomend content */
.related-content {
  margin-top: 40px;
}

.related-content h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: #facc15; /* เหลืองทอง */
}

.related-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.related-cards .card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 16px;
  width: 380px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}

.related-cards .card a {
  text-decoration: none;
  color: white;
}

.related-cards .card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.related-cards .card p {
  font-size: 0.875rem;
  color: #ddd;
}

.related-cards .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}