body {
  background: #3f3f3f;
  color: #ffffff;
}

.navbar {
  background: #2f2f2f;
  color: #ffffff
}

.navbar-brand {
  color: #ffffff;
}

.nav-item {
  color: #2f2f2f
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border-color: #ffffff;
}

.navbar-collapse {
  border-left: 1px solid #ffffff;
  padding-left: 1rem;
  margin-left: 1rem;
}

.card {
  color: #2f2f2f;
  background: #ffffff;
  border-color: #ffffff;
}

.btn {
  background: #4f4f4f;
  color: #ffffff;
  border-color: #4f4f4f;
}

:root {
  /* Methods - Brown */
  --color-methods-xlight: #e8d9c4;
  --color-methods-light:  #c4a882;
  --color-methods-mid:    #7a5c3d;
  --color-methods-dark:   #4a3728;

  /* History - Rust */
  --color-history-xlight: #e8c4ba;
  --color-history-light:  #c4806e;
  --color-history-mid:    #a05040;
  --color-history-dark:   #7a3b2e;

  /* Biology - Forest Green */
  --color-biology-xlight: #c0dab8;
  --color-biology-light:  #7aaa6e;
  --color-biology-mid:    #4a7a40;
  --color-biology-dark:   #2d4a2d;

  /* Memory - Slate Blue */
  --color-memory-xlight:  #c4d4e0;
  --color-memory-light:   #8aa8c0;
  --color-memory-mid:     #4a6e88;
  --color-memory-dark:    #2e3d4a;

  /* Learning - Olive */
  --color-learning-xlight: #d8d8a8;
  --color-learning-light:  #aaaa6e;
  --color-learning-mid:    #6e6e38;
  --color-learning-dark:   #4a4a1e;

  /* Development - Teal */
  --color-development-xlight: #b0d4cc;
  --color-development-light:  #6aaa9a;
  --color-development-mid:    #3a7060;
  --color-development-dark:   #1e3d3d;

  /* Emotion - Plum */
  --color-emotion-xlight: #d4b8d4;
  --color-emotion-light:  #aa7aaa;
  --color-emotion-mid:    #724472;
  --color-emotion-dark:   #4a2d4a;

  /* Stress - Sienna */
  --color-stress-xlight:  #e0c4a8;
  --color-stress-light:   #c08860;
  --color-stress-mid:     #8a5535;
  --color-stress-dark:    #5c3317;
}

.card-methods     { background-color: var(--color-methods-xlight);     border-color: var(--color-methods-dark); }
.card-history     { background-color: var(--color-history-xlight);     border-color: var(--color-history-dark); }
.card-biology     { background-color: var(--color-biology-xlight);     border-color: var(--color-biology-dark); }
.card-memory      { background-color: var(--color-memory-xlight);      border-color: var(--color-memory-dark); }
.card-learning    { background-color: var(--color-learning-xlight);    border-color: var(--color-learning-dark); }
.card-development { background-color: var(--color-development-xlight); border-color: var(--color-development-dark); }
.card-emotion     { background-color: var(--color-emotion-xlight);     border-color: var(--color-emotion-dark); }
.card-stress      { background-color: var(--color-stress-xlight);      border-color: var(--color-stress-dark); }

.btn-methods     { background-color: var(--color-methods-dark);     border-color: var(--color-methods-dark); }
.btn-history     { background-color: var(--color-history-dark);     border-color: var(--color-history-dark); }
.btn-biology     { background-color: var(--color-biology-dark);     border-color: var(--color-biology-dark); }
.btn-memory      { background-color: var(--color-memory-dark);      border-color: var(--color-memory-dark); }
.btn-learning    { background-color: var(--color-learning-dark);    border-color: var(--color-learning-dark); }
.btn-development { background-color: var(--color-development-dark); border-color: var(--color-development-dark); }
.btn-emotion     { background-color: var(--color-emotion-dark);     border-color: var(--color-emotion-dark); }
.btn-stress      { background-color: var(--color-stress-dark);      border-color: var(--color-stress-dark); }

.link-methods     { background-color: var(--color-methods-light);     border-color: var(--color-methods-dark);}
.link-history     { background-color: var(--color-history-light);     border-color: var(--color-history-dark); }
.link-biology     { background-color: var(--color-biology-light);     border-color: var(--color-biology-dark); }
.link-memory      { background-color: var(--color-memory-light);      border-color: var(--color-memory-dark); }
.link-learning    { background-color: var(--color-learning-light);    border-color: var(--color-learning-dark); }
.link-development { background-color: var(--color-development-light); border-color: var(--color-development-dark); }
.link-emotion     { background-color: var(--color-emotion-light);     border-color: var(--color-emotion-dark); }
.link-stress      { background-color: var(--color-stress-light);      border-color: var(--color-stress-dark); }

/* Card buttons */
.btn-methods:hover     { background-color: var(--color-methods-mid);     border-color: var(--color-methods-mid); color: #dfdfdf}
.btn-history:hover     { background-color: var(--color-history-mid);     border-color: var(--color-history-mid); color: #dfdfdf}
.btn-biology:hover     { background-color: var(--color-biology-mid);     border-color: var(--color-biology-mid); color: #dfdfdf}
.btn-memory:hover      { background-color: var(--color-memory-mid);      border-color: var(--color-memory-mid); color: #dfdfdf}
.btn-learning:hover    { background-color: var(--color-learning-mid);    border-color: var(--color-learning-mid); color: #dfdfdf}
.btn-development:hover { background-color: var(--color-development-mid); border-color: var(--color-development-mid); color: #dfdfdf}
.btn-emotion:hover     { background-color: var(--color-emotion-mid);     border-color: var(--color-emotion-mid); color: #dfdfdf}
.btn-stress:hover      { background-color: var(--color-stress-mid);      border-color: var(--color-stress-mid); color: #dfdfdf}

/* Nav links */
.link-methods:hover     { background-color: var(--color-methods-mid); color: #dfdfdf}
.link-history:hover     { background-color: var(--color-history-mid); color: #dfdfdf}
.link-biology:hover     { background-color: var(--color-biology-mid); color: #dfdfdf}
.link-memory:hover      { background-color: var(--color-memory-mid); color: #dfdfdf}
.link-learning:hover    { background-color: var(--color-learning-mid); color: #dfdfdf}
.link-development:hover { background-color: var(--color-development-mid); color: #dfdfdf}
.link-emotion:hover     { background-color: var(--color-emotion-mid); color: #dfdfdf}
.link-stress:hover      { background-color: var(--color-stress-mid); color: #dfdfdf}

.page-methods     { background-color: var(--color-methods-mid); color: #ffffff}
.page-history     { background-color: var(--color-history-mid); color: #ffffff}
.page-biology     { background-color: var(--color-biology-mid); color: #ffffff}
.page-memory      { background-color: var(--color-memory-mid); color: #ffffff}
.page-learning    { background-color: var(--color-learning-mid); color: #ffffff}
.page-development { background-color: var(--color-development-mid); color: #ffffff}
.page-emotion     { background-color: var(--color-emotion-mid); color: #ffffff}
.page-stress      { background-color: var(--color-stress-mid); color: #ffffff}

.page-methods .navbar     { background-color: var(--color-methods-dark); }
.page-history .navbar     { background-color: var(--color-history-dark); }
.page-biology .navbar     { background-color: var(--color-biology-dark); }
.page-memory .navbar      { background-color: var(--color-memory-dark); }
.page-learning .navbar    { background-color: var(--color-learning-dark); }
.page-development .navbar { background-color: var(--color-development-dark); }
.page-emotion .navbar     { background-color: var(--color-emotion-dark); }
.page-stress .navbar      { background-color: var(--color-stress-dark); }

.page-link-methods     { background-color: var(--color-methods-dark); color: #ffffff}
.page-link-history     { background-color: var(--color-history-dark); color: #ffffff}
.page-link-biology     { background-color: var(--color-biology-dark); color: #ffffff}
.page-link-memory      { background-color: var(--color-memory-dark); color: #ffffff}
.page-link-learning    { background-color: var(--color-learning-dark); color: #ffffff}
.page-link-development { background-color: var(--color-development-dark); color: #ffffff}
.page-link-emotion     { background-color: var(--color-emotion-dark); color: #ffffff}
.page-link-stress      { background-color: var(--color-stress-dark); color: #ffffff}

.page-link-methods:hover     { background-color: var(--color-methods-dark); color: #ffffff}
.page-link-history:hover     { background-color: var(--color-history-dark); color: #ffffff}
.page-link-biology:hover     { background-color: var(--color-biology-dark); color: #ffffff}
.page-link-memory:hover      { background-color: var(--color-memory-dark); color: #ffffff}
.page-link-learning:hover    { background-color: var(--color-learning-dark); color: #ffffff}
.page-link-development:hover { background-color: var(--color-development-dark); color: #ffffff}
.page-link-emotion:hover     { background-color: var(--color-emotion-dark); color: #ffffff}
.page-link-stress:hover      { background-color: var(--color-stress-dark); color: #ffffff}


.nav-link {
  border-right: 0px solid #4f4f4f;
  padding-left: 0;
  padding-right: 0;
}

.nav-link:first-child {
  border-left: 0px solid #4f4f4f;
}

@media (max-width: 991px) {
  .nav-link {
    border-right: none;
    border-bottom: 0px solid #4f4f4f;
  }

  .nav-link:first-child {
    border-left: none;
    border-top: 0px solid #4f4f4f;
  }
}

.navbar-brand:hover {
  color: #dfdfdf
}