body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(0deg 22.75% 9.1%);
}

#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification {
  max-width: 300px;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.3s ease-out, fadeOut 0.5s ease-in 2.5s forwards;
  transition: transform 0.3s ease;
}

.notification.success {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.notification.error {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.notification.warning {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}




.menu {
  background: #222;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  position: relative;
  z-index: 99999;
  bottom: 15%;
  justify-self: anchor-center;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: 5px;
}



@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

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

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.menu a i {
  transition: transform 0.3s ease-in-out;
}

.menu a:hover i {
  animation: bounce 0.6s ease-in-out;
}