* {
  box-sizing: border-box;
}
/* Scrolling settings */
@media (prefers-color-scheme: light) {
  :root {
    --scroll-bgcolor: rgba(192, 192, 192, 96%);
    --scroll-border: rgba(52, 52, 52, 96%);
    --scroll-bg-hover: rgba(232, 232, 232, 96%);
    --scroll-border-hover: rgba(42, 42, 42, 96%);
    --track-bgcolor: rgba(232, 232, 232, 96%);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --scroll-bgcolor: rgba(52, 52, 52, 96%);
    --scroll-border: rgba(168, 168, 168, 96%);
    --scroll-bg-hover: rgba(62, 62, 62, 96%);
    --scroll-border-hover: rgba(200, 200, 200, 96%);
    --track-bgcolor: rgba(52, 52, 52, 96%);
  }
}
:root.light {
  --scroll-bgcolor: rgba(192, 192, 192, 96%);
  --scroll-border: rgba(52, 52, 52, 96%);
  --scroll-bg-hover: rgba(232, 232, 232, 96%);
  --scroll-border-hover: rgba(42, 42, 42, 96%);
  --track-bgcolor: rgba(232, 232, 232, 96%);
}
:root.dark {
  --scroll-bgcolor: rgba(52, 52, 52, 96%);
  --scroll-border: rgba(168, 168, 168, 96%);
  --scroll-bg-hover: rgba(62, 62, 62, 96%);
  --scroll-border-hover: rgba(200, 200, 200, 96%);
  --track-bgcolor: rgba(52, 52, 52, 96%);
}
/* Width & Height */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
/* Track */
body::-webkit-scrollbar-track {
  background-color: var(--track-bgcolor);
}
/* Track Piece */
body::-webkit-scrollbar-track-piece {
  background-color: var(--track-bgcolor);
  -webkit-border-radius: 5px;
}
/* Corner */
body::-webkit-scrollbar-corner {
  background-color: var(--track-bgcolor);
}
/* Handle */
body::-webkit-scrollbar-thumb {
  height: auto;
  background-color: var(--scroll-bgcolor);
  -webkit-border-radius: 5px;
  border: 1px solid var(--scroll-border);
}
/* Handle on Hover */
body::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:active {
  height: auto;
  background-color: var(--scroll-bg-hover);
  -webkit-border-radius: 5px;
  border: 1px solid var(--scroll-border-hover);
}
