/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #a0998a;
  color: #e24f63;
  font-family: Verdana;
  padding-top: 4.5rem;
}


.navbar {
  background-color: #0e0c16;
  color: #ceafe4;
}

.nav-link {
  color: #ceafe4;
}

.nav-item {
  color: #ceafe4;
}

.nav-link:hover {
  color: #aec3e2;
}

.nav-item:hover {
  color: #aec3e2;
}

.nav-link:visited {
  color: #ceafe4;
}

.nav-item:visited {
  color: #ceafe4;
}

.navbar-nav .nav-link.show {
    color: #ceafe4;
  }
  
.dropdown-item {
  background-color: #3d355e;
}

.dropdown-menu {
  background-color: #3d355e;
}

.dropdown .btn:hover {
  background-color: #3d355e;
}

.dropdown-link-hover-bg {
  background-color: #53487f
}

.dropdown-item {
  color: #ceafe4;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #2e2747;
  color: #f1e3fc;
}

.card {
  background-color: #313672;
  color:#eff2fc;
  border: 0;
}

.card-header {
  background-color: #5359a3;
  color:#eff2fc;
}

a:link {
  color: #e24f63;
}
a:visited {
  color: #e24f63;
}
a:hover {
  color: #aec3e2;
}
a:active {
  color: #aec3e2;
}

.breadcrumb {
  color: #ceafe4;
}

.breadcrumb-item {
  color: #ceafe4;
}

.breadcrumb .breadcrumb-item::before {
  color: #ceafe4;
}

.breadcrumb .breadcrumb-item.active {
  color: #756489;
}

.breadcrumb-chevron {
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  gap: .5rem;
  color: #ceafe4;
}
.breadcrumb-chevron .breadcrumb-item {
  display: flex;
  gap: inherit;
  align-items: center;
  padding-left: 0;
  line-height: 1;
  color: #ceafe4;
}
.breadcrumb-chevron .breadcrumb-item::before {
  gap: inherit;
  float: none;
  width: 1rem;
  height: 1rem;
  color: #ceafe4;
}

.breadcrumb-custom .breadcrumb-item {
  position: relative;
  flex-grow: 1;
  padding: .75rem 3rem;
}
.breadcrumb-custom .breadcrumb-item::before {
  display: none;
}
.breadcrumb-custom .breadcrumb-item::after {
  position: absolute;
  top: 50%;
  right: -25px;
  z-index: 1;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  content: "";
  background-color: var(--bs-tertiary-bg);
  border-top-right-radius: .5rem;
  box-shadow: 1px -1px var(--bs-border-color);
  transform: scale(.707) rotate(45deg);
}
.breadcrumb-custom .breadcrumb-item:first-child {
  padding-left: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child {
  padding-right: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child::after {
  display: none;
}