a {
  color: var(--df);
  text-decoration: none;
}

/* main start */
main {
  display: flex;
  justify-content: space-evenly;
  gap: 40px;
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  max-height: 800px;
}

.showList {
  visibility: visible !important;
  pointer-events: auto !important;
}

.section2Hidden {
  visibility: hidden;
  pointer-events: none;
}

.npl-names::-webkit-scrollbar {
  width: 0px; /* For vertical scrollbars */
  height: 0px; /* For horizontal scrollbars */
}

.npl-names {
  display: flex;
  flex-direction: column;
  height: fit-content;
  gap: 30px;
  width: 100%;
  max-height: 800px;
  /* flex-wrap: wrap; */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /*mac*/
}

.npl-list-all {
  width: 100px;
  padding: 0px !important;
  border-radius: 20px;
  font-size: var(--twentyTwo);
  font-weight: var(--xl);
  font-family: var(--barlow);
  opacity: 0.85;
  /* height: var(--medButton); */
}

.npl-list-all:hover {
  opacity: 1;
}

.npl-list-contributor-names {
  width: fit-content;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* justify-content: space-between; */
}

.npl-button-wrapper {
  width: 100px;
  /* height: 100%; */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

main button {
  width: var(--xlButton);
  height: var(--xlButton);
  border-radius: 50%;
  outline: none;
  border: none;
  cursor: pointer;
}

.npl-list-letter {
  font-family: var(--barlow);
  font-weight: var(--xl);
  background-color: white;
  color: var(--7b);
  opacity: 1;
  font-size: var(--twentyTwo);
  /* margin: 0 0 10px 0; */
}

.author-active-color {
  background-color: var(--92);
  color: var(--df);
  opacity: 1;
}

.author-change.author-remove-color {
  background-color: white;
  color: var(--7b);
}

.npl-list-letter:focus {
  opacity: 1;
}

.npl-list-letter:hover {
  opacity: 0.85;
}

.npl-names p {
  cursor: pointer;
  color: black;
  font-size: var(--eighteen);
  font-family: var(--libre);
  /* opacity: 0.7; */
  width: fit-content;
}

.npl-names p:hover {
  /* opacity: 1; */
  color: var(--7b);
}

.npl-list-letter.non-exist {
  opacity: 0.4;
  pointer-events: none;
}