/* Color palette */

:root {
  /* Primary colors */
  --color-primary-darkgreen: #2d3830;
  --color-primary-normalgreen: #47594e;
  --color-primary-lightgreen: #556b5e;

  --color-secondary-orange: #ff7f00;

  --color-background-black: #000000;
  --color-background-gray: #2b2b2b;
  --color-background-white: #f6f6f6;

  --color-font-black: #000000;
  --color-font-white: #f6f6f6;

  --color-overlay-dark: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(255, 255, 255, 0.5);
}

.dark-green-bg {
  background-color: var(--color-primary-darkgreen);
}

.normal-green-bg {
  background-color: var(--color-primary-normalgreen);
}

.light-green-bg {
  background-color: var(--color-primary-lightgreen);
}

.white-bg {
  background-color: var(--color-background-white);
}

.black-color {
  color: var(--color-font-black);
}

.orange-bg {
  background-color: var(--color-secondary-orange);
}

.black-bg {
  background-color: var(--color-background-black);
}

.gray-bg {
  background-color: var(--color-background-gray);
}

.white-color {
  color: var(--color-font-white);
}

.dark-overlay {
  background-color: var(--color-overlay-dark);
}

.light-overlay {
  background-color: var(--color-overlay-light);
}

.dark-font-color {
  color: var(--color-font-black);
}

.white-font-color {
  color: var(--color-font-white);
}