/*scrollbar styling*/

/* WebKit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px; /* Maximum width for vertical scrollbar */
  height: 10px; /* Maximum height for horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background-color: #a686ff;
  border-radius: 15px;
  /* Remove the border or adjust it */
  border: none; /* Or: border: 2px solid #f1f1f1; */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Change color on hover */
}

/* Firefox */
html {
  scrollbar-width: auto; /* Options: auto, thin */
  scrollbar-color: #a686ff #f1f1f1; /* Color for thumb and track */
}

/* Internet Explorer and Old Edge */
html {
  scrollbar-face-color: #a686ff;
  scrollbar-track-color: #f1f1f1;
}

.toggle-filter {
  animation: plopp 0.3s ease-in-out forwards !important; /* Use 'forwards' to maintain the end state */
}

@keyframes plopp {
  0% {
    transform: scale(100%);
  } /* Start at original size */
  50% {
    transform: scale(105%);
  } /* Scale up slightly */
  100% {
    transform: scale(0%);
  } /* Return to original size */
}

.conduct-text {
  overflow-x: hidden;
  column-count: 3;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.1rem;
  color: white;
  width: 98.5%;
}

.conduct-text p {
  width: 90%;
}

.conduct-legal {
  margin-top: 5rem;
  font-size: 2.2rem;
  padding-left: 1rem;
  color: white;
}

.conduct-source {
  font-size: 1.1rem;
}

a {
  color: white;
}

.sidebar {
  transform: translateX(-100%); /* Start off-screen */
  width: 100%;
}

html {
  background-color: black;
}

@media (max-width: 1440px) {
  .conduct-text {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .conduct-legal {
    margin-top: 0rem;
    padding-left: 1rem;
    color: white;
    width: 80%;
    display: none;
  }

  .conduct-text {
    width: 93%;
    column-count: 1;
    padding: 1rem;
    padding-left: 1rem;
    margin-top: 0.5rem;
    color: white;
  }

  .conduct-text p,
  .conduct-text a {
    width: 100%;
  }

  .sidebar-chapters  {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .conduct-text {
    column-count: 1;
    padding: 1rem;
    padding-left: 0.5rem;
    margin-top: 0.5rem;
    color: white;
    font-size: 1rem;
  }

  .conduct-source p {
    font-size: 1rem;
  }
}