:root {
  --md-primary-fg-color: #4d4d4d;
  --md-primary-fg-color--light: #00c8f7;
  --md-primary-fg-color--dark: #0088aa;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--dark: #0088aa;
  --md-accent-fg-color: #0088aa;
  --md-accent-fg-color--transparent: #818181;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffff;
  --md-hue: 190deg;
  color-scheme: dark;
  --plyr-video-background: transparent;
  --top-home-section-color: linear-gradient(
    0deg,
    rgb(30, 39, 41) 0%,
    rgb(30, 39, 41) 39%,
    #4d4d4d 100%
  );

  --slate-md-typeset-color: hsla(var(--md-hue), 15%, 90%, 0.82);
  --slate-md-default-bg-color: hsla(var(--md-hue), 15%, 14%, 1);
  --slate-md-default-fg-color--light: hsla(var(--md-hue), 15%, 90%, 0.56);

  --gradient: conic-gradient(
    from 60deg at 50% 50%,
    rgba(0, 136, 170, 1) 0%,
    rgba(0, 136, 170, 1) 13%,
    rgba(0, 136, 170, 1) 61%,
    rgba(0, 136, 170, 1) 99%
  );
}

/* Custom colors for dark mode */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--md-primary-fg-color--light);
  --card-glow-intensity: 0.6;

  video[src$="#only-light"] {
    display: none;
  }
}

/* Custom colors for light mode */
[data-md-color-scheme="default"] {

  video[src$="#only-dark"] {
    display: none;
  }

  --md-typeset-a-color: var(--md-primary-fg-color--dark);
  --card-glow-intensity: 0.25;
  .md-button--primary {
    background-color: var(--md-accent-fg-color--transparent);
    border-color: var(--md-accent-fg-color--transparent);
  }
  hr {
    background-image: linear-gradient(
      to right,
      transparent 0%,
      rgb(202, 202, 202) 25%,
      rgba(202, 202, 202) 75%,
      transparent 100%
    );
  }
  svg.home-icon {
    filter: brightness(33%);
  }
  #sign-in-button {
    color: var(--slate-md-typeset-color);
  }
  #sign-in-button:hover {
    color: #ffffff;
    background-color: var(--slate-md-typeset-color);
    border-color: var(--slate-md-typeset-color);
  }
  figure img.dark-img {
    background-color: var(--slate-md-default-bg-color);
  }
  .slogan {
    color: var(--slate-md-default-fg-color--light);
  }
  .home-description {
    color: var(--slate-md-typeset-color);
  }
  #home-secondary-button {
    color: var(--slate-md-typeset-color);
  }
  #home-secondary-button:hover {
    color: #ffffff;
    background-color: var(--slate-md-typeset-color);
    border-color: var(--slate-md-typeset-color);
  }
  a#account-btn {
    color: var(--slate-md-typeset-color);
  }
  .price-cell {
    color: black;
  }
  .ai-provider-icon {
    filter: brightness(0.4);
  }
}

.red-color {
  color: #ff5252;
}

.green-color {
  color: #2b9b46;
}