:root {
  --text: #eff2f1;
  --background: #0f1413;
  --primary: #b4c5c0;
  --secondary: #594552;
  --accent: #947c75;
}

body {
  background-color: var(--background);
  color: var(--text);
}

.navbar-brand {
  color: var(--text);
}

.navbar-brand:hover {
  color: var(--accent);
}

.navbar .nav-link {
  background-color: var(--background);
  color: var(--text);
}

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

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: var(--background);
  color: var(--text);
}

.card-container .card {
  flex: 1 0 21%;
  margin: 1%;
  background-color: var(--primary);
  color: var(--secondary);
}

.btn {
  background-color: var(--accent);
  color: var(--text);
  outline-color: var(--accent);
}
.btn:hover {
  background-color: var(--secondary);
  color: var(--text);
}

.card .card-body {
  background-color: var(--primary);
  color: var(--secondary);
}

.modal-content {
  background-color: var(--background);
  color: var(--text);
}

.table {
  background-color: var(--primary);
  color: var(--secondary);
}

.table > :not(caption) > * > * {
  background-color: var(--primary);
}

.usersTableContainer {
  background-color: var(--background);
  color: var(--text);
  width: 60%;
  margin: auto;
}
.courseImage {
  width: 100%;
  height: 200px;
  object-fit: contain;
}
#courseManagmentTitle {
  color: var(--text);
}

.courseContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.btn-close {
  color: var(--text);
}
.btn-close:hover {
  color: var(--accent);
}