: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;
}

/* Custom colors for light mode */
[data-md-color-scheme="default"] {
  --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;
  }
}

.red-color {
  color: #ff5252;
}

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