:root {
  --background-color: #424547;
  --color: #e5e5e5;
  --link-color: #bdbdbd;
  --link-color-hover: #dee2e6;
  --link-color-hover-white: #fff;
  --icon-filter: invert(100%);
  --icon-filter_hover: invert(40%);
  --image-filter: grayscale(50%);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);

  --box-background-color: #4c5053;
  --card-background-color: #4c5053;
  --card-background-color-hover: #424547;
  --tab-background-color: #4c5053;

  --button-background-color: #4c5053;
  --button-background-color-hover: transparent;

  --button-border-color: #9a9a9a;
  --button-border-color-hover: #dd2c00;
  --button-text-color: #f3f3f3;
  --button-text-color-hover: #f3f3f3;

  --nav-tab-background-color: #c09b74;
  --nav-tab-background-color-active: #c09b74;
  --nav-tab-border-color: #fff;
  --nav-tab-border-color-active: #dd2c00;
  --nav-tab-text-color: #f3f3f3;
  --nav-tab-text-color-active: #dee2e6;

  --footer-background-color: #4c5053;

  --border-gray: #424547;
  --background-gray: #4c5053;
  
  --color-red: #ff5151;
}

img[src*=".svg"] {
  filter: var(--icon-filter);
}

img:not([src*=".svg"]) {
  filter: var(--image-filter);
}