@import "tailwindcss/base";

@import "./styles/prism.css";

@import "./styles/expressive-code.css";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "./styles/fonts.css";

@layer base {

html {

color-scheme: light;

}

html[data-theme*="dark"] {

color-scheme: dark;

}

/** Scroll bar */

html,

.custom-scrollbar {

scroll-padding-top: 6rem;

scrollbar-color: #778292 #e7ecf2;

scrollbar-width: thin;

}

html[data-theme*="dark"],

html[data-theme*="dark"] .custom-scrollbar {

scrollbar-color: #8a99ae #313c50;

scrollbar-width: thin;

}

/**

html.windows:not(.firefox),

html.windows.dark:not(.firefox) {

scrollbar-width: initial;

}

html.windows:not(.firefox) .custom-scrollbar,

html.windows.dark:not(.firefox) .custom-scrollbar {

scrollbar-color: initial;

scrollbar-width: initial;

}

html.windows .custom-scrollbar::-webkit-scrollbar-track {

@apply bg-transparent;

}

html.windows .custom-scrollbar::-webkit-scrollbar {

@apply h-5 w-5 rounded-xl border-[6px] border-solid border-transparent bg-slate-200/80;

background-clip: content-box;

}

html.windows.dark .custom-scrollbar::-webkit-scrollbar {

@apply bg-slate-600/60;

}

html.windows .custom-scrollbar::-webkit-scrollbar-thumb {

@apply rounded-xl border-[6px] border-solid border-transparent bg-slate-600/70;

background-clip: content-box;

}

html.windows.dark .custom-scrollbar::-webkit-scrollbar-thumb {

@apply bg-slate-400/90;

}

html.windows .custom-scrollbar::-webkit-scrollbar-thumb:hover {

@apply bg-slate-600;

}

html.windows.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {

@apply bg-slate-200/70;

}

html.windows [inert] ::-webkit-scrollbar {

display: none;

}

.prose h1,

.prose h2 {

@apply mt-0;

}

img {

@apply rounded-xl;

}

}

.shiki.material-theme-ocean {

background-color: transparent !important;

}

@layer utilities {

a[data-auto-heading] {

@apply text-slate-900 shadow-none dark:text-white !important;

}

a[data-auto-heading]:hover::after {

@apply opacity-80;

content: " #";

}

}

.navigation_collapsible {

overflow: hidden;

animation: slideUp 300ms ease-out;

}

.navigation_collapsible[data-expanded] {

animation: slideDown 300ms ease-out;

}

@keyframes slideDown {

from {

height: 0;

}

to {

height: var(--kb-collapsible-content-height);

}

}

@keyframes slideUp {

from {

height: var(--kb-collapsible-content-height);

}

to {

height: 0;

}

}

:root {

--bprogress-color: theme("colors.blue.500") !important;

}

html {

--twoslash-cursor: #24292e;

}

html[data-theme*="dark"] {

--twoslash-cursor: #babed8;

}