:root {
  --color-bg: rgb(250, 250, 250);
  --color-navbar-bg: rgb(248, 248, 248);
  --color-bg-bgbox: #fff;
  --searchbar-bg: rgb(255, 255, 255);
  --color-gradient-start: rgb(217, 183, 254);
  --color-gradient-end: rgb(250, 250, 250);
  --color-text-small: rgba(90, 93, 98, 1);
  /* neutral-300 */
  --color-text-big: rgba(31, 41, 55, 1);
  --color-bg-box: #f5f5f5;
  /* neutral-800 */
  /* neutral-100 */
  --color-recipe-bg: rgb(38, 38, 38);
  --color-text-nav-active: rgba(51, 52, 54, 1);
  --color-text-nav-mobile-active: rgba(48, 48, 48, 1);

  --color-navbar-text: rgba(140, 140, 140, 1);
  --color-navbar-bg-hover: rgba(229, 231, 235, 1);
  --color-navbar-text-hover: rgb(0, 0, 0);

  --color-navbar-bg-sec: rgba(229, 231, 235, 1);
  --color-navbar-text-sec: rgb(0, 0, 0);
  --color-navbar-bg-hover-sec: rgb(211, 211, 211);
  --color-navbar-text-hover-sec: rgb(0, 0, 0);
  --color-navbar-text-header: rgba(38, 38, 38, 1);
  --color-navbar-icon: rgb(0, 0, 0);

  --color-text-mobile-menu: rgb(0, 0, 0);
  --color-bg-mobile-menu: rgba(255, 255, 255, 0.1);

  --color-sidebar-bg-backlink: rgba(205, 157, 234, 0.464);
  --color-sidebar-text-backlink: rgb(0, 0, 0);
  --color-sidebar-bg-backlink-hover: rgba(205, 157, 234, 0.297);
  --color-sidebar-text-backlink-hover: rgb(0, 0, 0);

  --color-sidebar-category-bg-active: rgba(184, 196, 239, 0.312);
  --color-sidebar-category-bg-hover: #f0f0f083;
  --color-sidebar-category-text-hover: #222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: rgb(5, 5, 5);
    --color-navbar-bg: rgb(12, 12, 12);
    --color-bg-bgbox: #0a0a0a;
    --searchbar-bg: rgb(9, 9, 9);
    --color-gradient-start: rgb(68, 47, 90);
    --color-gradient-end: rgb(5, 5, 5);

    --color-text-small: rgb(186, 190, 196);
    --color-text-big: rgb(245, 244, 244);
    --color-bg-box: #121212;

    --color-text-nav-active: rgba(209, 213, 219, 1);
    --color-text-nav-mobile-active: rgba(219, 219, 219, 1);

    --color-navbar-text: rgba(140, 140, 140, 1);
    --color-navbar-bg-hover: rgba(38, 38, 38, 1);
    --color-navbar-text-hover: rgb(255, 255, 255);

    --color-navbar-bg-sec: rgba(243, 244, 246, 1);
    --color-navbar-text-sec: rgb(0, 0, 0);
    --color-navbar-bg-hover-sec: rgb(255, 255, 255);
    --color-navbar-text-hover-sec: rgb(0, 0, 0);
    --color-navbar-text-header: rgba(245, 245, 245, 1);
    --color-navbar-icon: rgb(255, 255, 255);

    --color-text-mobile-menu: rgb(255, 255, 255);
    --color-bg-mobile-menu: rgba(0, 0, 0, 0.6);

    --color-sidebar-bg-backlink: rgba(134, 124, 212, 0.516);
    --color-sidebar-text-backlink: rgb(255, 255, 255);
    --color-sidebar-bg-backlink-hover: rgba(109, 95, 212, 0.516);
    --color-sidebar-text-backlink-hover: rgba(229, 231, 235, 1);

    --color-sidebar-category-bg-active: rgba(181, 192, 233, 0.225);
    --color-sidebar-category-bg-hover: #f0f0f016;
    --color-sidebar-category-text-hover: rgb(230, 232, 237);
  }
}

body {
  font-family: "Inter", sans-serif;
}

.inter-semi-extrabold {
  font-family: "Inter", sans-serif;
  font-weight: 580;
  /* Smoothly rendered with variable font */
}

.inter-semi-bold {
  font-family: "Inter", sans-serif;
  font-weight: 510;
  /* Smoothly rendered with variable font */
}

.inter-semi-mediumbold {
  font-family: "Inter", sans-serif;
  font-weight: 450;
  /* Smoothly rendered with variable font */
}