/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: 0.6rem;
  background-color: hsl(var(--hue), 20%, 20%);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--hue), 20%, 30%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--hue), 20%, 40%);
}

/*os 3 webkit acima são para chrome, safari, edge... e esse @suports abaixo é para firefox*/

@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--hue), 20%, 40%) hsl(var(--hue), 20%, 20%);
  }
}

/*=============== SCROLL UP ===============*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -50%;
  background-color: var(--container-color);
  display: inline-flex;
  padding: 6px;
  color: var(--title-color);
  font-size: 1.5rem;
  box-shadow: 0 4px 12px hsla(var(--hue), 30%, 8%, 0.3);
  z-index: var(--z-tooltip);
  transition:
    bottom 0.4s,
    transform 0.4s;
}

.scrollup:hover {
  transform: translateY(-0.5rem);
}

/* Show Scroll Up */
.show-scroll {
  bottom: 3rem;
}