@tailwind base;
@tailwind components;
@tailwind utilities;


main
{margin-bottom:2em}
 [x-cloak] { display: none; }


:root {
  --c-bg: snow;
  --c-scrollbar: lightsteelblue;
  --c-scrollbar-hover: #000;
}
html {
  background-color: var(--c-bg);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

html.dark {
  --c-bg: #050505;
  --c-scrollbar: #111;
  --c-scrollbar-hover: #222;
}

body {
  height: 100%;
  overflow-y: scroll;
}

::selection {
  background: #8884;
}
* {
  scrollbar-color: var(--c-scrollbar) var(--c-bg);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar:horizontal {
  height: 6px;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
  background: var(--c-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--c-scrollbar);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-scrollbar-hover);
}