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

body {
  background-color: #1a1a1a;
  color: #f0f0f0;
  font-family: 'Inter', sans-serif;
}

.hero {
  background: linear-gradient(135deg, #1a1a1a, #333333);
  padding: 4rem 0;
  text-align: center;
}

.hero h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #00c7ff;
}

.joke-card {
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
}

.joke-text-style {
  color: #FFFFFF;
  font-size: 1.7rem;
  font-weight: 700;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
}

.btn-primary {
  background-color: #00c7ff;
  border-color: #00c7ff;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #00a3cc;
  border-color: #00a3cc;
}