body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* Add the Tailwind directives to your CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* To make the footer sticky at the bottom of the page
   when the content height is less than the browser window height,
   one workaround is to set the minimum height of major-content
   to 100% of the viewport height.
*/
.major-content {
  min-height: 100vh; /* 100% of the viewport height */
}

/* a thinner scrollbar for the scrollable theme list on navbar */
.theme-list-scrollbar::-webkit-scrollbar {
  width: 1px;
}

.theme-list-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.theme-list-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 1px;
}

.theme-list-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.theme-list-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.theme-list-scrollbar::-webkit-scrollbar-corner {
  display: none;
}
