/* Basic Styles */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  transition: background-color 0.5s ease;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  font-size: 2.5rem;
}

#typewriter {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffcc00;
}

button {
  background-color: #333;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 5px;
}

button:hover {
  background-color: #555;
}

nav {
  background-color: #444;
  text-align: center;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

section {
  padding: 40px 20px;
  margin: 20px 0;
}

h2 {
  font-size: 2.5rem;
}

.skill-list li {
  margin-bottom: 10px;
}

.skill-list .progress-bar {
  height: 8px;
  background-color: #4caf50;
  border-radius: 4px;
}

/* Base contact section styles */
#contact {
  background-color: #fff;  /* Light mode background */
  color: #333;             /* Light mode text color */
  padding: 40px 20px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeIn 1s ease-in-out;
}

#contact h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
  animation: fadeIn 1s ease-in-out 0.5s;
}

#contact p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.contact-links {
  display: flex;
  justify-content: space-between; /* Space between the items */
  gap: 20px;  /* Spacing between the items */
  flex-wrap: wrap; /* Ensure it wraps on smaller screens */
}

.contact-link {
  color: #333;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.contact-link i {
  margin-right: 10px;
  font-size: 1.7rem;  /* Larger icon */
}

.contact-link:hover {
  background-color: #ffcc00;
  color: white;
  transform: translateY(-4px); /* Subtle hover lift effect */
}

.contact-link:focus {
  outline: none;
}

.contact-link:hover i {
  transform: rotate(360deg); /* Rotate icon on hover */
}

/* Tooltip Styling */
.contact-link[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 1.1rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.contact-link:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  #contact {
      background-color: #222;  /* Dark mode background */
      color: #eee;             /* Dark mode text color */
  }

  #contact h2 {
      color: #ffcc00;          /* Dark mode header color (yellow for contrast) */
  }

  #contact p {
      color: #ccc;             /* Light gray text for description */
  }

  .contact-links .contact-link {
      color: #eee;             /* Dark mode link color */
  }

  .contact-links .contact-link:hover {
      background-color: #ff9900;  /* Dark mode hover effect */
      color: white;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #contact h2 {
      font-size: 2rem;
  }

  .contact-links {
      flex-direction: column;
      align-items: center;
  }

  .contact-links .contact-link {
      margin-bottom: 15px;
  }

  .floating-contact-btn button {
      font-size: 1.2rem;
  }
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Floating Contact Button */
.floating-contact-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}

.floating-contact-btn button {
  background-color: #ffcc00;
  color: white;
  padding: 15px 25px;
  font-size: 1.5rem;
  border: none;
  border-radius: 50%;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.floating-contact-btn button:hover {
  background-color: #ff9900;
}



footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

footer a {
  color: #ddd;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode header {
  background-color: #1e1e1e;
}

body.dark-mode nav {
  background-color: #1e1e1e;
}

body.dark-mode footer {
  background-color: #1e1e1e;
}

/* Typewriter Effect */
#typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid orange;
  animation: typing 3.5s steps(30) 1s forwards, blinkCaret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCaret {
  50% { border-color: transparent; }
}