.head-img {
  cursor: pointer;
  transition-duration: 200ms;
}

.head-img.active:focus {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  outline-style: solid;
  outline-width: 6px;
  outline-color: #0000002b;
}

*::-webkit-scrollbar {
  height: 0.25rem;
  width: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  -webkit-transition-property: all;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 768px) {
  *::-webkit-scrollbar {
    height: 0.5rem;
  }
}

*::-webkit-scrollbar:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

*::-webkit-scrollbar-thumb {
  width: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

/* 停止滾動後的樣式 */

.scrollable.hidden-scrollbar::-webkit-scrollbar {
  opacity: 0.3;
}