:root {
   --primary-color: rgb(0, 0, 0);
   --secondary-color: #c4cbaf;
   --tertiary-color: #D1D8BE;
   --cards-color: #dfe5cd;
   --button-hover: #b5be9c;
   --light-color: #fefff4;
   --white-color: #ffffff;
}
header {
   background-color: var(--tertiary-color);
}

/* Scrollbar */
::-webkit-scrollbar-track {
  background: #00000000;
}
::-webkit-scrollbar-thumb {
  background: var(--tertiary-color);
}


body {
   background-color: var(--light-color);
}
a {
   color: var(--primary-color);
   text-decoration: none;
}

p.caption {
   color: var(--secondary-color);
}

/**
* Bootstrap styles
**/
.card-body {
   background-color: var(--cards-color);
}


/**
* Login and registration screen
**/
.registration-container .login-img {
   background-color: var(--secondary-color);

}

.form-control {
   background-color: var(--tertiary-color);
}

button {
   background-color: var(--tertiary-color);
   transition: background-color 300ms ease-in-out;
}

.messageDiv {
   color: var(--primary-color);
}

/**
* Main page
**/
.main-container .btn.btn-primary.dropdown-toggle {
   background-color: var(--tertiary-color);
   border: none;
   color: black;
}

.aside-button {
   background-color: var(--secondary-color);
}

.footer-div {
   background-color: var(--tertiary-color);
}

footer .aside-button {
   background-color: var(--secondary-color);
}
.aside {
   background-color: var(--white-color);
   border: solid 3px var(--cards-color);
}
.progress-bar {
   border: solid 1px var(--secondary-color);
}

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

.aside.community .banner {
   background-color: var(--secondary-color);
}
/*.main-container  nav {
   background-color: var(--tertiary-color);
}*/

/*.main-container  main {
   background-color: var(--tertiary-color);
}*/

.youtube-card {
   background-color: var(--cards-color);
}

footer input {
   background-color: transparent;
}


/**
* Challenges
**/
.content-card {
   background-color: var(--white-color);
   border: solid 3px var(--cards-color);
}

.challenges button {
   background-color: var(--secondary-color);
}

.challenges .card {
   background-color: transparent;
}

/**
* Categories
**/
.categorie-body {
   background-color: var(--tertiary-color);
}
input[type="checkbox"] {
   background-color: var(--light-color);
   border: 0.12em solid var(--primary-color);
}

/* Check */
input[type="checkbox"]::after {
   color: var(--light-color);
}

/* Aktives Checkbox */
input[type="checkbox"]:checked {
   background-color: var(--secondary-color);
}

/* Navigation */
nav > div {
   background-color: var(--secondary-color);
}

/*
 * User Page
 */
#logout {
   background-color: var(--tertiary-color);
   transition: background-color 300ms ease-in-out;
}
.user-container main {
   background-color: var(--light-color);
}
.user-container .profile {
   background: var(--white-color);
   border: solid 3px var(--cards-color);
}

/*
 * Community 
 */
.community-card {
   background-color: var(--cards-color);
}