/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.activeFocus {
  background-color: oklch(62.7% 0.194 149.214);
}

.navbar-header-show {
  opacity: 1 !important;
}

html {
  font-family: var();
  font-style: var(--body-font-font-style);
  font-weight: var(--body-font-font-weight);
  line-height: var(--body-font-line-height);
  letter-spacing: var(--body-font-letter-spacing);
  text-transform: var(--body-font-text-transform);
  -webkit-font-smoothing: antialiased;
}

.nutrient-selected {
  --box-shadow-color: transparent;
  box-shadow: 0 0 0 6px var(--box-shadow-color);
}

.nutrient-selected.protein {
  --box-shadow-color: #9d174d;
}

.nutrient-selected.fat {
  --box-shadow-color: oklch(47.3% .137 46.201);
}

.nutrient-selected.carb {
  --box-shadow-color: #155e75;
}

.nutrient-selected.kcal {
  --box-shadow-color: #fff;
}

.nutrient-selected.fiber {
  --box-shadow-color: #4d7c0f;
}

.nutrient-selected.fasting {
  --box-shadow-color: #fff;
}

.nutrient-selected.hypertrophy {
  --box-shadow-color: #be123c;
}

.nutrient-selected.cardio {
  --box-shadow-color: #1d4ed8;
}

.nutrient-selected.vilpa {
  --box-shadow-color: #854d0e;
}

.nutrient-selected.yoga {
  --box-shadow-color: #6d28d9;
}

.nutrient-selected.breath {
  --box-shadow-color: #a21caf;
}

.nutrient-selected.meditation {
  --box-shadow-color: #047857;
}

div#blocks-header>.selected {
  transform: translateY(65px);
}

@font-face {
  font-family: 'greatvibes';
  /* Name you'll use in CSS */
  src: url("/assets/GreatVibes-Regular-f73b0887.ttf");
  font-weight: normal;
  font-style: normal;
}