:root {
  --terminal-green: #1db954;
  --terminal-green-hover: #0ffc00;
  --terminal-green-darker: #138f40;
}

img.round {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Terminal look */
.md-header,
.md-footer {
  color: var(--terminal-green);
}

/* Force all links inside content to be terminal green */
.md-typeset a:link {
  color: var(--terminal-green) !important;
}

.md-typeset a:visited {
  color: var(--terminal-green-darker) !important;
}

.md-typeset a:hover {
  color: var(--terminal-green-hover) !important;
}

/* Fix category/tag links in blog metadata */
.md-ellipsis a,
.md-ellipsis a:visited {
  color: var(--terminal-green) !important;
  text-decoration: none;
}

.md-ellipsis a:hover {
  color: var(--terminal-green-hover) !important;
}

.md-meta__link,
.md-meta__link:visited {
  color: var(--terminal-green) !important;
  text-decoration: none;
}

.md-meta__link:hover {
  color: var(--terminal-green-hover) !important;
  font-weight: bold;
}

/* Simulate terminal prompt in nav or headings */
.md-nav__title,
.md-nav__link {
  color: var(--terminal-green) !important;
}

/* Hover effect for Table of Contents links (left sidebar) */
.md-nav__link[href] {
  transition:
    color 0.3s ease,
    font-weight 0.3s ease;
}

.md-nav__link[href]:hover {
  color: var(--terminal-green-hover) !important;
  font-weight: bold;
}

.md-nav__link--active[href] {
  color: var(--terminal-green-hover) !important;
  font-weight: bold;
}

/* Post title hover */
.md-post__content a:hover {
  font-weight: bold;
}

/* This is for the continue reading hover */
.md-post__action a:hover {
  font-weight: bold;
}

/* Make H1 headers terminal green */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--terminal-green);
}

/* Terminal green for footer text */
.md-footer,
.md-footer * {
  color: var(--terminal-green) !important;
}

.md-footer a:hover {
  color: var(--terminal-green-hover) !important;
}

/* Style the search input */
.md-search__input {
  background-color: #000 !important;
  color: var(--terminal-green) !important;
  border: 1px solid var(--terminal-green);
  font-family: monospace;
}

/* Placeholder text color */
.md-search__input::placeholder {
  color: #1db954aa; /* semi-transparent green */
}

/* Search icon */
.md-search__icon {
  color: var(--terminal-green);
}

/* Search results */
.md-search-result__title,
.md-search-result__teaser {
  color: var(--terminal-green);
}

.md-search-result__meta {
  color: #00cc00;
}

.md-search-result__icon {
  color: var(--terminal-green);
}

.md-search__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--terminal-green);
}

/* Magnifying glass icon in the search input */
/* Target the SVG icon inside the search button */
/* Target all SVG paths inside the search icon label */
.md-search__icon svg path {
  fill: var(--terminal-green) !important;
  stroke: var(--terminal-green) !important;
}

/* Also target the label color (in case icons inherit color) */
.md-search__icon {
  color: var(--terminal-green) !important;
}

/* Hover/focus color */
.md-search__icon:hover,
.md-search__icon:focus {
  color: var(--terminal-green-hover) !important;
}

.md-button {
  transition: background-color 0.3s ease;
  border: 1px solid var(--terminal-green) !important;
}

.md-button:hover,
.md-button:focus {
  background-color: var(--terminal-green-hover) !important;
  border-color: var(--terminal-green-hover) !important;
  outline: none;
  box-shadow: none;
}

/* More specific selector with !important to override */
.md-button.black-text-hover:hover,
.md-button.black-text-hover:focus {
  color: black !important;
}

@media screen and (max-width: 768px) {
  img.round {
    width: 140px !important; /* ~30% smaller than 230px */
    height: 140px !important;
    object-position: 50% 20%;
  }
}

/* Only change scrollbar thumb hover color */

/* Webkit browsers */
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: var(--terminal-green-hover) !important;
}

/* Firefox */
.md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--terminal-green-hover) transparent; /* thumb color on hover */
}

/* Back to Top Button */
button.md-top.md-icon:focus,
button.md-top.md-icon:active {
  background-color: var(--terminal-green);
  outline: none; /* optional: remove default focus outline */
}