:root {
  --accent-color: #1C98CA; /* headers and "nav links on hover"    blue*/
  --primary-text-color: #231F20; /* most texts                    gray-black */
  --secondary-text-color: #8B8B8B; /* placeholders                lighter gray */
  --tertiary-text-color: #AFAFAF; /* footer links                 very light gray, basically unreadable */
  --secondary-accent-color: #F39000; /* active links              extremely ugly and unreadable orange */
  --background-color: #f8f8f8; /* background                      almost white */
  --danger-color: #EA212D; /* error messages or hyperlinks        red */
  --light-accent-color: #9de3ff; /* accent color + hover          light blue */
  --disabled-color: #d5d5d5; /* disabled buttons                  extremely light gray */
  --disabled-color-light: #e9e9e9; /* disabled buttons            extremely light gray */
  --box-shadow-hover-color: rgba(0, 0, 0, 0.1);
  --box-shadow-focus-color: rgba(0, 0, 0, 0.15);
  --box-shadow-hover: rgba(0, 0, 0, 0.1) 0 .25rem .5rem;
  --box-shadow-focus: rgba(0, 0, 0, 0.15) 0 .25rem .5rem;
}

body, footer {
  background-color: var(--background-color) !important;
}

nav {
  background-color: rgba(var(--background-color));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

header .nav-link {
  color: var(--primary-text-color) !important;
}

footer .nav-link {
  color: var(--tertiary-text-color) !important;
}

.nav-link.active {
  color: var(--secondary-accent-color) !important;
  border-color: var(--secondary-accent-color) !important;
}

.nav-link:hover {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

p {
  color: var(--primary-text-color);
}

h5 {
  color: var(--accent-color);
}

input {
  background-color: white;
  color: var(--primary-text-color);
}
input::placeholder {
  color: var(--secondary-text-color);
}

label {
  color: var(--primary-text-color);
}

button {
  color: var(--primary-text-color);
  background-color: white;
}