/* Navbar Component */
.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(240, 1%, 17%, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--jet);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-2);
  z-index: 5;
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.navbar-item { position: relative; }

.navbar-link {
  color: var(--light-gray);
  font-size: var(--fs-8);
  padding: 20px 7px;
  transition: color var(--transition-1);
}

.navbar-link:hover,
.navbar-link:focus { color: var(--light-gray-70); }

.navbar-link.active { color: var(--orange-yellow-crayola); }

/* Breadcrumb */
.breadcrumb {
  background: var(--eerie-black-2);
  padding: 15px 20px;
  border-radius: var(--radius-14);
  box-shadow: var(--shadow-1);
  margin-bottom: 15px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  list-style: none;
}

.breadcrumb-item {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-300);
}

.breadcrumb-link {
  color: var(--orange-yellow-crayola);
  transition: var(--transition-1);
}

.breadcrumb-link:hover { color: var(--orange-yellow-crayola); }

.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin-left: 5px;
  color: var(--light-gray-70);
}

.breadcrumb-item.active { color: var(--white-2); }