


:root {
  --c-bg: #f5f5f5;
  --c-fg: #444444;
  --c-scroll: #d9d9d9;
  --c-scroll-hover: #bbbbbb;
  scrollbar-color: var(--c-scrollbar) var(--c-bg);
}

html {
  font-family: system-ui, sans-serif;
  background-color: var(--c-bg);
  color: var(--c-fg);
}

html.dark {
  --c-bg: #212129;
  --c-fg: #ddddf0;
  --c-scroll: #333333;
  --c-scroll-hover: #555555;
  --c-scrollbar: var(--c-scroll);
}

main {
  max-width: 60ch;
  margin: 0 auto;
  padding: 2rem 2rem 100px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--c-scroll);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-scroll-hover);
}
::-webkit-scrollbar-track {
  background-color: var(--c-bg);
}


body::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/**
 Animated Theme Toggle
 */
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;
   mix-blend-mode: normal;
 }
 
 .dark::view-transition-old(root) {
   z-index: 1;
 }
 .dark::view-transition-new(root) {
   z-index: 999;
 }
 
 ::view-transition-old(root) {
   z-index: 999;
 }
 ::view-transition-new(root) {
   z-index: 1;
 }
 



