index.css

html {
  @apply h-full;
}

body {
  @apply text-white flex items-center justify-center bg-gradient-to-b from-violet-600 to-violet-900 bg-cover bg-fixed;
}

#app {
  @apply w-screen h-screen;
  font-family: "Inter";
}

/* PrismJS theme fix */
pre[class*='language-'] {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

:root {
  --prism-scheme: dark;
  --prism-foreground: #d4cfbf;
  --prism-background: theme('colors.gray.800');
  --prism-comment: #758575;
  --prism-string: #ce9178;
  --prism-literal: #4fb09d;
  --prism-keyword: #4d9375;
  --prism-function: #c2c275;
  --prism-deleted: #a14f55;
  --prism-class: #5ebaa8;
  --prism-builtin: #cb7676;
  --prism-property: #dd8e6e;
  --prism-namespace: #c96880;
  --prism-punctuation: #d4d4d4;
  --prism-decorator: #bd8f8f;
  --prism-regex: #ab5e3f;
  --prism-json-property: #6b8b9e;
  --prism-line-number: #888888;
  --prism-line-number-gutter: #eeeeee;
  --prism-line-highlight-background: #444444;
  --prism-selection-background: #444444;

  /* Custom */
  --background: 0 0% 100%;
  --foreground: 224 71.4% 4.1%;

  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;

  --popover: 0 0% 100%;
  --popover-foreground: 224 71.4% 4.1%;

  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 20% 98%;

  --secondary: 220 14.3% 95.9%;
  --secondary-foreground: 220.9 39.3% 11%;

  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;

  --accent: 220 14.3% 95.9%;
  --accent-foreground: 220.9 39.3% 11%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 262.1 83.3% 57.8%;
  --radius: 0.5rem;
}