:root {
  --color-background: 0 0 0;
  --color-foreground: 235 219 178;
  --color-red: 251 73 52;
  --color-red-bright: 255 110 85;
  --color-orange: 254 128 25;
  --color-orange-bright: 255 165 65;
  --color-green: 184 187 38;
  --color-green-bright: 210 215 70;
  --color-yellow: 250 189 47;
  --color-yellow-bright: 255 215 85;
  --color-blue: 131 165 152;
  --color-blue-bright: 165 195 180;
  --color-purple: 211 134 155;
  --color-purple-bright: 235 165 180;
  --color-aqua: 142 192 124;
  --color-aqua-bright: 175 220 160;
  --color-surface: 60 56 54;
}

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

.stream-hidden > .prose > * {
  opacity: 0;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  display: none;
}

/* src/styles/global.css or wherever your main CSS file is */
@layer base {
  ::selection {
    @apply bg-purple/50
  }
  
  ::-moz-selection {
    @apply bg-purple/50
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Regular */
@font-face {
    font-family: "ComicRegular";
    src: url(data:application/font-woff;base64,[encoded data, 124280 characters]) format("woff");
}

body {
  font-family: "ComicRegular";
}

code[data-line-numbers] {
  counter-reset: line;
}

code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);

  /* Other styling */
  display: inline-block;
  width: 0.75rem;
  margin-right: 2rem;
  text-align: right;
  color: gray;
}


code[data-line-numbers-max-digits="2"] > [data-line]::before {
  width: 1.25rem;
}

code[data-line-numbers-max-digits="3"] > [data-line]::before {
  width: 1.75rem;
}

code[data-line-numbers-max-digits="4"] > [data-line]::before {
  width: 2.25rem;
}

code {
  overflow-x: scroll !important;
  max-width: calc(82vw - 2rem) !important;
  width: 100% !important;
}
