html {
  background: rgba(229, 231, 235);
  color: rgba(55, 65, 81);
}

html ::-webkit-scrollbar {
  width: 8px;
  border-radius: 8px;
}
  
html ::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 8px;
}
  
html ::-webkit-scrollbar-thumb {
  background: #BBB;
  border-radius: 8px;
}
  
html ::-webkit-scrollbar-thumb:hover {
  background: #999;
}

html.dark {
  background: rgba(31, 41, 55);
  color: rgba(229, 231, 235);
}

html.dark ::-webkit-scrollbar {
  width: 8px;
  border-radius: px;
}
  
html.dark ::-webkit-scrollbar-track {
  background: #111827;
  border-radius: 8px;
}
  
html.dark ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
}
  
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #AAA;
}

.transition {
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

html.dark select option {
  background: #111827;
  color: rgba(229, 231, 235);
}

/* There is no way to do this in TailwindCSS 2.*, which is used by twind.js */
input::placeholder,
textarea::placeholder {
  font-style: italic;
}