/* Scrollbar global - Webkit */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* slate-300 */
  border-radius: 9999px;
}

/* HILANGKAN PANAHNYA */
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Dark mode scrollbar */
html.dark *::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* slate-600 */
}

/* Firefox */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

html.dark, body.dark {
  scrollbar-color: #4b5563 transparent;
}

.flair {
  position: fixed;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  background: white;
  mix-blend-mode: difference;
  z-index: 9999;
}

.bg-grid {
	background-image:
		linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}