div.breadcrumb-container {
    width: 100%;
    background: transparent;
    padding: 1rem 1.3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid var(--success-success);
    border-radius: 5px;
    box-shadow: 1px 1px var(--success-almost-black);
    flex-wrap: wrap;
}

input#filter-input {
    min-width: 20%;
    background-color: var(--success-lightest);
    font-family: "Lato", sans-serif;
    font-weight: 600;
    color: var(--grey-dark);
    font-size: 14pt;
    padding: 0.3rem 0.6rem;
    border: 1px inset var(--success-success);
    border-radius: 5px;
    box-shadow: 1px 1px var(--success-almost-black);
}

input#filter-input:focus, input#filter-input:focus-within, input#filter-input::shadow {
    border: 1px solid var(--success-success);
    border-radius: 5px;
    box-shadow: 2px 1px var(--success-almost-black);
}

input#filter-input::spelling-error {
    text-decoration: none;
}

ul#breadcrumbs {
    font-family: "JetbrainsMonoNerdFont", monospace;
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    min-width: fit-content;
    flex-wrap: wrap;
}

ul li.crumb {
    display: flex;
}

a.word-wrap-anywhere {
    word-wrap: anywhere;
}


ul li.crumb.last a {
    color: var(--alert-lightest);
}