/* "+" and "-" Navigation Buttons - above "?" Help Button */
* {
  font-family: monospace, monospace;
}

/* Container Holding "+" and "-" buttons */
#nav-buttons {
  position: fixed;
  bottom: 60px; /* Position above help button */
  right: 20px;
  display: flex;
  flex-direction: column; /* Stack "+" and "-" buttons vertically */
  gap: 2px; /* Gap between "+" and "-" */
  z-index: 1;
  background: rgb(0, 0, 0);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

/* "+" and "-" Buttons (individually given this class) */
#nav-buttons button {
  width: 30px;
  height: 30px;
  color: rgb(179, 179, 179);
  font-size: 25px;
  background: none; /* Override button styles */
  border: none; /* Override button styles */
  transition: all 0.2s ease;
}

/* Changes color of "+" or "-" sign on hover to white */
#nav-buttons button:hover {
  color: white;
}

/* When "+" or "-" button is disabled, applies styling */
#nav-buttons button:disabled {
  opacity: 0.3; /* Reduces opacity */
  cursor: not-allowed; /* Disables clicking */
}