@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
  backdrop-filter: blur(10px); /* Stronger blur */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.modal-content {
  background-color: rgba(17, 24, 39, 0.8); /* Semi-transparent dark gray */
  backdrop-filter: blur(8px); /* Glassmorphism effect */
  padding: 24px; /* Increased padding */
  border-radius: 12px; /* More rounded */
  max-width: 500px;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* Subtle glow shadow */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Thin light border */
  /* font-family: 'Arvo', serif; removed */
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.modal-overlay.fade-in {
  animation-name: fadeIn;
}

.modal-overlay.fade-out {
  animation-name: fadeOut;
}

.modal-content.slide-up {
  animation-name: slideUp;
}

.modal-content.slide-down {
  animation-name: slideDown;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.5rem;
  /* font-weight: bold; removed */
  font-family: 'Space Mono', 'JetBrains Mono', monospace;
  color: #f87171; /* Primary color for title */
}

.close-button {
  background-color: transparent;
  border: none;
  color: #9ca3af; /* gray-400 */
  cursor: pointer;
  border-radius: 9999px; /* fully rounded */
  padding: 8px; /* Bigger click area */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
  color: white;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Increased gap */
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Increased gap */
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 15px; /* Increased gap */
  color: #e5e7eb; /* gray-200 */
  background-color: rgba(26, 32, 44, 0.5); /* Semi-transparent background */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
  padding: 12px 16px; /* Larger padding */
  border-radius: 8px; /* Rounded corners */
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.contact-link:hover {
  background-color: rgba(26, 32, 44, 0.8); /* Darker on hover */
  color: white;
  border-color: rgba(248, 113, 113, 0.4); /* Primary color accent */
  transform: translateY(-2px); /* Subtle lift */
}

.contact-link span {
  font-family: 'Space Mono', 'JetBrains Mono', monospace;
  font-size: 0.95rem; /* Slightly smaller for balance */
}

.red-text {
  color: #f87171;
}