/*
Hide color mode toggle in small viewports
 */
@media (max-width: 996px) {
  .colorModeToggle {
    display: none;
  }
}

@media (max-width: 768px) {
  .responsivePadding {
    padding-right: 3.5rem; /* Adjust value for smaller screens */
  }
}

@media (min-width: 769px) and (max-width: 995px) {
  .responsivePadding {
    padding-right: 11rem; /* Default value for larger screens */
  }
}

@media (min-width: 996px) {
  .responsivePadding {
    padding-right: 1rem; /* Default value for widths greater than 996px */
  }
}

.logo {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0.75;
}

.logo:hover {
  width: 24px;
  height: 24px;
  opacity: 1;
}