/* Language Switcher Styles */
.lang-switch {
  border-left: none;
  /* Let's rely on the default li styling from the theme */
  margin-left: 0;
  padding-left: 0;
}

.lang-switch a {
  font-size: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Mobile responsiveness for language switcher */
@media screen and (max-width: 768px) {
  .lang-switch {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
}

/* Project Categories Styles */
.project-categories {
  margin-top: 2em;
}

.project-categories h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.project-categories h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid #333;
  transition: border-color 0.2s ease;
}

.project-categories h3 a:hover {
  border-bottom-color: #888;
}

.project-categories p {
  margin: 0.5em 0 1em 0;
  line-height: 1.7;
}

.project-categories strong {
  color: #666;
  font-size: 0.9em;
}

.project-categories hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid #eee;
}

/* Theme Toggle Button */
.theme-toggle {
  margin-left: 0;
  padding-left: 15px;
}

.theme-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1em; /* a little smaller */
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  line-height: inherit;
}

.theme-toggle button:hover {
  opacity: 1;
}

.theme-toggle button:focus {
  outline: none;
}

/* Homepage Intro Styles */
.intro {
  margin-bottom: 1.5em;
}

.intro-greeting {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}

.intro p {
  line-height: 1.7;
  margin-bottom: 0.8em;
}

.intro a {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.intro a:hover {
  opacity: 0.7;
}

.social-links {
  margin-top: 1em;
}

.social-links .icon {
  font-size: 1.3em;
  margin-right: 0.5em;
  text-decoration: none;
}

.social-links .icon:hover {
  opacity: 0.7;
}

/* About Page Avatar */
article img[alt*="Marcos Pagelkopf"] {
  max-width: 100px;
  border-radius: 50%;
  float: left;
  margin: 0 1.5em 1em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  article img[alt*="Marcos Pagelkopf"] {
    max-width: 75px;
    margin: 0 1em 1em 0;
  }
}