@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");

:root {
  --custom-rgb: 255, 45, 0;
  --color-primary: #ff2d00;

  --color-primary-light-1: oklch(1 0.244 31.9);
  --color-primary-light-2: oklch(0.94 0.244 31.9);
  --color-primary-light-3: oklch(0.88 0.244 31.9);
  --color-primary-light-4: oklch(0.81 0.244 31.9);
  --color-primary-light-5: oklch(0.74 0.244 31.9);
  --color-primary-light-6: oklch(0.67 0.244 31.9);
  --color-primary-light-7: oklch(0.64 0.244 31.9);

  --color-primary-dark-1: oklch(0.50 0.244 31.9);
  --color-primary-dark-2: oklch(0.42 0.244 31.9);
  --color-primary-dark-3: oklch(0.35 0.244 31.9);
  --color-primary-dark-4: oklch(0.28 0.244 31.9);
  --color-primary-dark-5: oklch(0.21 0.244 31.9);
  --color-primary-dark-6: oklch(0.16 0.244 31.9);
  --color-primary-dark-7: oklch(0.09 0.244 31.9);

  --color-logo: var(--color-primary);

  --fonts-proportional: "Inter", sans-serif !important;
  --fonts-monospace: "Fira Code", monospace !important;
}

@supports (font-variation-settings: normal) {
  :root {
    --fonts-proportional: 'Inter var', sans-serif !important;
  }
}

#navbar .navbar-left #navbar-logo img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(2686%) hue-rotate(0deg) brightness(105%) contrast(110%);
}

.home .logo {
  filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(2686%) hue-rotate(0deg) brightness(105%) contrast(110%);
}

.home .header {
  color: var(--color-primary);
}