/* Color Inverter Button */
#color-inverter {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 12px;
  background-color: rgba(46, 46, 46, 0.9);
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: all 0.3s ease;
}

#color-inverter:hover {
  background-color: #6f6f6f;
  transform: translateY(-3px);
}

#color-inverter:active {
  transform: translateY(1px);
}

/* Background Changer Button */
#bg-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(46, 46, 46, 0.9);
  color: white;
  border: none;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: all 0.3s ease;
}

#bg-button:hover {
  background-color: #6f6f6f;
  transform: translateY(-3px);
}

#bg-button:active {
  transform: translateY(1px);
}

/* Invert colors for everything */
body.inverted #invert-wrapper {
  filter: invert(0.99) hue-rotate(180deg);
}

/* Exclude specific elements from inversion */
body.inverted .info,
body.inverted .custom,
body.inverted .updatecat,
body.inverted img,
body.inverted video {
  filter: invert(1) hue-rotate(180deg);
}

/* ⇧⇧⇧ EXPERIMENT ⇧⇧⇧ */
/* ⇧⇧⇧ EXPERIMENT ⇧⇧⇧ */
/* ⇧⇧⇧ EXPERIMENT ⇧⇧⇧ */

/* ⇩⇩⇩ update-log button ⇩⇩⇩*/
#updates-button {
  position: fixed;
  bottom: 140px;
  right: 20px;
  background-color: rgba(46, 46, 46, 0.9);
  color: white;
  border: none;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  transition: all 0.3s ease;
}

#updates-button:hover {
  background-color: #6f6f6f;
  transform: translateY(-3px);
}

#updates-button:active {
  transform: translateY(1px);
}


body.inverted #updates-button,
body.inverted #bg-button,
body.inverted #color-inverter 
{
  background-color: rgba(219, 219, 219, 0.9);
}

body.inverted #updates-button:hover,
body.inverted #bg-button:hover,
body.inverted #color-inverter:hover 
{
  background-color: #6f6f6f;
  transform: translateY(-3px);
}