global.scss

@import 'driver.js/dist/driver.min.css';

/* Basic layout */
:root {
  color-scheme: dark light;
}

html,
body,
#__nuxt,
#__layout,
.page-root {
  @apply min-h-[100vh];
}

html,
body,
#__nuxt,
#__layout,
.page-root,
main {
  @apply bg-gray-50 dark:bg-gray-900;
  scroll-padding-block: 140px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.page-root {
  @apply flow-root w-full;
  min-height: 100vh;
}

.page-contents {
  @apply grid;
  grid-template-rows: 70px 1fr;
}

main {
  @apply flex flex-wrap xl:container;
  margin-top: 2rem;
}

kbd {
  @apply bg-gray-100 dark:bg-gray-800 border bottom-1 dark:border-gray-600 border-gray-300 shadow rounded-sm text-gray-700 dark:text-gray-50 inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  @apply bg-gray-50 dark:bg-gray-700;
}
::-webkit-scrollbar-thumb {
  @apply bg-gray-500 dark:bg-gray-500;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-400;
}

::selection {
  @apply bg-gray-800 text-gray-300 dark:bg-gray-200 dark:text-gray-800;
}