/* fira-code-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/fira-code-v22-latin-300.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-code-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/fira-code-v22-latin-600.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --font-family: 'Fira Code', monospace;
  font-family: var(--font-family);

  /* Spacing */
  --spacing-xs: 4px;
  /* Extra small spacing */
  --spacing-sm: 8px;
  /* Small spacing */
  --spacing-md: 16px;
  /* Medium spacing */
  --spacing-lg: 24px;
  /* Large spacing */
  --spacing-xl: 32px;
  /* Extra large spacing */

}

body {
  overflow: hidden;

  --neutral-100: #E7E7E7;
  --neutral-200: #A6A6A6;
  --neutral-300: #7C7C7C;
  --neutral-400: #2D2D2D;
  --neutral-500: #171717;
  --neutral-800: #111111;
  --neutral-900: #060606;

  /* Secondary color */
  --secondary-color: #6c757d;

  --layer-0: var(--neutral-900);
  --layer-1: var(--neutral-500);
  --layer-2: var(--neutral-400);
  --layer-3: var(--neutral-200);

  --outline: var(--neutral-400);

  --text-color: var(--neutral-200);

  color: var(--text-color);
  background-color: var(--layer-0);
}

body * {
  color: var(--text-color);
}

body.theme-light {
  --text-color: var(--neutral-800);
  --outline: var(--neutral-300);
  --layer-0: var(--neutral-100);
  --layer-1: var(--neutral-100);
  --layer-2: var(--neutral-100);
  --layer-3: var(--neutral-500);
}

body.theme-solarized {
  --text-color: #425055;
  --outline: #93a1a1;
  --layer-0: #fdf6e3;
  --layer-1: #eee8d5;
  --layer-2: #93a1a1;
  --layer-3: #586e75;
}

body.theme-catppuccin {
  --text-color: #CDD6F4;
  --outline: #3e3e4f;
  --layer-3: #a8aac8;
  --layer-2: #313244;
  --layer-1: #1E1E2E;
  --layer-0: #11111b;
}

body.theme-high-contrast {
  --text-color: #FFFFFF;
  --outline: white;
  --layer-0: #000000;
  --layer-1: black;
  --layer-2: #222222;
  --layer-3: #FFFFFF;
}

body.theme-nord {
  --text-color: #D8DEE9;
  /* Nord snow */
  --outline: #4C566A;
  /* Nord frost */
  --layer-0: #2E3440;
  /* Nord polar night */
  --layer-1: #3B4252;
  /* Nord polar night */
  --layer-2: #434C5E;
  /* Nord polar night */
  --layer-3: #5E81AC;
  /* Nord frost */
}

body.theme-dracula {
  --text-color: #F8F8F2;
  --outline: #6272A4;
  --layer-0: #282A36;
  --layer-1: #44475A;
  --layer-2: #32374D;
  --layer-3: #BD93F9;
}

body {
  margin: 0;
}

/* canvas { */
/*   display: none !important; */
/* } */