body {
  overflow: hidden;
  transition: background-color 0.5s, color 0.5s;
}

.fade-in {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

.social-media-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-media-links a {
  font-size: 2rem;
  transition: transform 0.3s, color 0.3s;
}

.social-media-links a:hover {
  transform: scale(1.2);
  color: #e74c3c; /* Rot Hover */
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.no-right-click {
  pointer-events: none;
}

body.dark-mode {
  background-color: #2d2d2d; /* Dunkel Schwarz */
  color: #ecf0f1;
}

body.dark-mode header,
body.dark-mode footer,
body.dark-mode #mode-toggle {
  background-color: #1c1c1c;
  color: #ecf0f1;
}

body.dark-mode #mode-toggle:hover {
  background-color: #2d2d2d;
}

body.dark-mode .social-media-links a:hover {
  color: #c0392b;
}

body.dark-mode .nav-link-contact {
  background-color: #c0392b; /* Rot */
  color: #ecf0f1;
}

body.dark-mode .nav-link-contact:hover {
  background-color: #a93226; /* Dunkleres Rot */
}

body.light-mode {
  background-color: #ecf0f1; /* Hell Grau */
  color: #2d2d2d;
}

body.light-mode header,
body.light-mode footer,
body.light-mode #mode-toggle {
  background-color: #bdc3c7;
  color: #2d2d2d;
}

body.light-mode #mode-toggle:hover {
  background-color: #ecf0f1;
}

body.light-mode .social-media-links a:hover {
  color: #e74c3c; /* Rot Hover für Icons im Light Mode */
}

body.light-mode .nav-link-contact {
  background-color: #e74c3c; /* Rot */
  color: #ffffff;
}

body.light-mode .nav-link-contact:hover {
  background-color: #c0392b; /* Dunkleres Rot */
}

@media (max-width: 640px) {
  .contact-text .contact-label {
      display: none;
  }

  .contact-text .contact-icon {
      display: inline;
  }
}