html {
  margin: 0;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width: 100%;
}


/* Hide scrollbar for Chrome, Safari */
html::-webkit-scrollbar {
  display: none;
}

body::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-color: var(--input) transparent;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Roboto, -apple-system, "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  overscroll-behavior: none;
  overflow: auto;
  /* position: fixed; */
  -webkit-overflow-scrolling: touch;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--muted-foreground);
}

a:hover {
  text-decoration-color: var(--foreground);
}

/* Text selection styles */
::selection {
  background-color: var(--accent);
}

::-moz-selection {
  background-color: var(--accent);
}

:root {
  --width-stretch: 100%;

  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;

  --border-radius-xs: 1px;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 16px;
  --border-radius-f: 50%;

  --border-width-xs: 1px;
  --border-width-sm: 2px;
  --border-width-md: 4px;
  --border-width-lg: 8px;
  --border-width-xl: 16px;

  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
  --shadow-md: 0px 5px 12px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);
  --shadow-lg: 0px 10px 24px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .5px 0px rgba(255, 255, 255, .08), inset 0px 0px .5px rgba(255, 255, 255, .35);

  --h1-font-size: 3rem;
  --h1-font-weight: 600;
  --h1-line-height: 1;
  --h1-letter-spacing: -.025em;

  --h2-font-size: 1.875rem;
  --h2-font-weight: 500;
  --h2-line-height: 2.25rem;
  --h2-letter-spacing: -.025em;

  --h3-font-size: 1.5rem;
  --h3-font-weight: 600;
  --h3-line-height: 2rem;
  --h3-letter-spacing: -.025em;

  --h4-font-size: 1.25rem;
  --h4-font-weight: 600;
  --h4-line-height: 1.75rem;
  --h4-letter-spacing: -.025em;

  --lg-font-size: 1.125rem;
  --lg-font-weight: 400;
  --lg-line-height: 1.75rem;
  --lg-letter-spacing: normal;

  --md-font-size: 1rem;
  --md-font-weight: normal;
  --md-line-height: 1.625rem;
  --md-letter-spacing: normal;

  --sm-font-size: .875rem;
  --sm-font-weight: 400;
  --sm-line-height: 1.25;
  --sm-letter-spacing: normal;

  --xs-font-size: .75rem;
  --xs-font-weight: normal;
  --xs-line-height: 1;
  --xs-letter-spacing: normal;


  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.145 0 0);

  /* surface color */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);

  /* item hovered color */
  /* can also be used with opacity 0.5 for hover */
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);

  /* item selected color */
  --accent: oklch(0.95 0 0);
  --accent-foreground: oklch(0.205 0 0);

  /* border/outline */
  --border: oklch(0.922 0 0);

  /* background of text inputs */
  --input: oklch(0.922 0 0);

  /* ring of text inputs */
  --ring: oklch(0.708 0 0);
}

/* Override in supported browsers */
@supports (width: -webkit-fill-available) {
  :root {
    --width-stretch: -webkit-fill-available;
  }
}
@supports (width: -moz-available) {
  :root {
    --width-stretch: -moz-available;
  }
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.305 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  margin-top: 32px;
  margin-bottom: 16px;
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  margin-top: 32px;
  margin-bottom: 16px;
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  margin-top: 32px;
  margin-bottom: 16px;
}

h4 {
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  margin-top: 32px;
  margin-bottom: 16px;
}

p {
  font-size: var(--md-font-size);
  font-weight: var(--md-font-weight);
  line-height: var(--md-line-height);
  letter-spacing: var(--md-letter-spacing);
  margin-top: 0;
  margin-bottom: 16px;
}

ul {
  margin-top: 0;
  margin-bottom: 16px;
  margin-left: 4px;
  padding-left: 16px;
}

li {
  margin-bottom: 8px;
  font-size: var(--md-font-size);
  font-weight: var(--md-font-weight);
  line-height: var(--md-line-height);
  letter-spacing: var(--md-letter-spacing);
}

blockquote {
  margin-top: 0;
  margin-bottom: 16px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  border-left: 2px solid var(--foreground);
}

blockquote > p {
  margin-bottom: 0px;
}

/* Offset for anchor links to account for fixed header */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 80px;
}