* {
  font-family: 'Fredoka', sans-serif;
}

.bacon-header {
  background: linear-gradient(135deg, #FFF8DC 0%, #FFE4E1 50%, #FFB6C1 100%);
  border-bottom: 4px dashed #D2691E;
}

.tab-button {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  background: white;
  border: 3px solid #FF6B9D;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button:hover {
  background: #FFE4E1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(210, 105, 30, 0.3);
}

.tab-button.active {
  background: linear-gradient(135deg, #FF6B9D, #D2691E);
  color: white;
  border-color: #D2691E;
}

.bacon-button {
  background: linear-gradient(135deg, #D2691E, #FF6B9D);
  color: white;
  font-weight: 700;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(210, 105, 30, 0.4);
}

.bacon-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(210, 105, 30, 0.6);
}

.bacon-button:active {
  transform: scale(0.98);
}

.joke-card {
  background: linear-gradient(135deg, #FFF8DC, #FFE4E1);
  padding: 2rem;
  border-radius: 1.5rem;
  border: 4px solid #FF6B9D;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.share-button {
  background: #FF6B9D;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-button:hover {
  background: #D2691E;
  transform: translateY(-2px);
}

.time-zone-card {
  background: linear-gradient(135deg, #FFE4E1, #FFF8DC);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 3px solid #FF6B9D;
  text-align: center;
}

.bacon-sizzle {
  animation: sizzle 2s ease-in-out infinite;
}

@keyframes sizzle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.meme-button {
  background: linear-gradient(135deg, #9333EA, #EC4899);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.meme-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
}

.meme-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.meme-card {
  background: linear-gradient(135deg, #F3E8FF, #FCE7F3);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 3px solid #9333EA;
}

.extra-button {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.extra-button:hover {
  transform: translateY(-2px) rotate(2deg);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

@media (max-width: 768px) {
  .bacon-header h1 {
    font-size: 2.5rem;
  }
  
  .clock-display {
    font-size: 2.5rem;
  }
  
  .tab-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}