/*@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Redacted&display=swap');*/
:root {
  /*  font-family: 'Flow Circular', system-ui;*/
  /* Primary Colors */

  /* Teal: Primary color */
  --primary: rgb(17, 49, 49);
  /* Deep Teal: A rich, deep shade for emphasis. */
  --emphasis: rgb(0, 82, 82);
  /* Dark Teal: A slightly darker shade for added depth. */
  --dark: rgb(28, 59, 59);
  /* Medium Teal: A mid-range teal for balance. */
  --secondary: rgb(48, 102, 102);
  /* Light Teal: A lighter shade for highlights or backgrounds. */
  --light: rgb(100, 166, 166);

  /* Accent Colors */

  /* Orange: A complementary color to teal, adding vibrancy. */
  --vibrant: #ff5733;
  /* (Gold): A warm accent color for contrast. */
  --accent: #ffb74d;
  /* (Olive Green): A nature-inspired color for variety. */
  --variety: #7ea04d;
  /* (Salmon): A subtle warm tone for softer accents. */
  --warm: #ff8c94;
  /* (Steel Blue): A cool, muted blue for balance. */
  --cool: #4d809e;

  --gradient: radial-gradient(ellipse farthest-corner at right bottom,
      var(--primary) 0%,
      transparent 5%,
      var(--secondary) 20%,
      transparent 30%,
      var(--dark) 40%,
      transparent 50%,
      var(--light) 60%,
      transparent 70%,
      var(--emphasis) 80%,
      transparent 95%),
    radial-gradient(ellipse farthest-corner at left top,
      var(--vibrant) 0%,
      var(--warm) 25%,
      var(--variety) 50%,
      var(--accent) 75%,
      var(--cool) 100%);

  --gold-gradient: radial-gradient(ellipse farthest-corner at right bottom,
      hsl(49, 99%, 61%) 0%,
      hsl(40, 98%, 59%) 8%,
      hsl(41, 60%, 39%) 30%,
      hsl(42, 49%, 36%) 40%,
      transparent 80%),
    radial-gradient(ellipse farthest-corner at left top,
      hsl(0, 0%, 100%) 0%,
      hsl(60, 100%, 84%) 8%,
      hsl(44, 54%, 61%) 25%,
      hsl(42, 50%, 24%) 62.5%);

      --infraviolet: linear-gradient(-13.666deg,
      hsl(270, 80%, 37.5%) 0%, hsl(270, 80%, 40%) 10%, hsl(270, 80%, 42.5%) 20%, hsl(270, 80%, 45%) 30%,
      hsl(270, 80%, 47.5%) 40%, hsl(270, 80%, 50%) 50%, hsl(270, 80%, 52.5%) 60%, hsl(270, 80%, 55%) 70%,
      hsl(270, 80%, 57.5%) 80%, hsl(270, 80%, 60%) 90%, hsl(270, 80%, 62.5%) 100%
    );
}

.gold-gradient {
  background: var(--gold-gradient);
  background-attachment: fixed;
  background-size: contain;
}

.infraviolet {
  background-image: var(--infraviolet)

}

.caution {
  background: repeating-linear-gradient(45deg, yellow, yellow 10px, black 10px, black 20px);
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  color: white;
  /* Adjust text color for better visibility */
}

mark {

  background: var(--gold-gradient) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card {
  background: var(--infraviolet) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

.card nav,
.card .container {
  backdrop-filter: blur(1px);
}

html[data-bs-theme="dark"] {
  --checkbox_checked: var(--checkbox_checked_dark);
  --checkbox_unchecked: var(--checkbox_unchecked_dark);
  --search: var(--search_dark);
  --pop-up-triangle: var(--pop-up-triangle_dark);
  --drop-down-triangle: var(--drop-down-triangle_dark);
  --hamburger: var(--hamburger_dark);
  --grips: var(--grips_dark);
  --sprites2x: var(--sprites2x_dark);
}

html[data-bs-theme="light"] {
  --checkbox_checked: var(--checkbox_checked_light);
  --checkbox_unchecked: var(--checkbox_unchecked_light);
  --search: var(--search_light);
  --pop-up-triangle: var(--pop-up-triangle_light);
  --drop-down-triangle: var(--drop-down-triangle_light);
  --hamburger: var(--hamburger_light);
  --grips: var(--grips_light);
  --sprites2x: var(--sprites2x_light);
}

body {
  font-family: 'Flow Circular', system-ui;
}

.checkbox_checked {
  background-image: var(--checkbox_checked);
}

.checkbox_unchecked {
  background-image: var(--checkbox_unchecked);
}

.search {
  background-image: var(--search);
}

.pop-up-triangle {
  background-image: var(--pop-up-triangle);
}

.drop-down-triangle {
  background-image: var(--drop-down-triangle);
}

#hamburger {
  background-image: var(--hamburger);
}

.grips {
  background-image: var(--grips);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.sprites2x {
  background-image: var(--sprites2x);
}