.icon-btn {
  background: none;
  border: none;
  font-size: 1.5rem; 
  color: var(--icon-color);
  cursor: pointer;
}

:root {
  --icon-color: #000;
  --background-color: #fff;
}

.dark-mode {
  --icon-color: #fff;
  --background-color: #121212;
}

body.dark-mode {
  background-color: black;
  color: #fff;
}

.mobile-only {
  display: inline-block;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

@media (min-width: 768px) {
  body.dark-mode {
    background-color: #fff !important;
    color: #000 !important;
  }

  .dark-mode {
    --icon-color: #000;
    --background-color: black;
  }
}
.icon-btn {
  background: none;
  border: none;
  font-size: 1.5rem; 
  color: var(--icon-color);
  cursor: pointer;
}

:root {
  --icon-color: #000;
  --background-color: #fff;
}

.dark-mode {
  --icon-color: #fff;
  --background-color: #121212;
}

body.dark-mode {
  background-color: black;
  color: #fff;
}

.mobile-only {
  display: inline-block;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

@media (min-width: 768px) {
  body.dark-mode {
    background-color: #fff !important;
    color: #000 !important;
  }

  .dark-mode {
    --icon-color: #000;
    --background-color: black;
  }
}