.list {
    font-size: 2rem
}

    .list a:hover,
    .list a:hover .name,
    .list a:focus,
    .list a:focus .name {
        color: var(--bs-link-hover-color) !important
    }

    .list:empty::before {
        display: block;
        width: 100%;
        padding: 100px 2rem;
        margin-right: 15px;
        margin-left: 15px;
        color: var(--bs-secondary-color);
        text-align: center;
        content: "Nothing found, try searching again.";
        background-color: var(--bs-secondary-bg);
        border-radius: .5rem
    }



.name {
    font-size: .8125rem
}

@media (min-width: 1200px) {
    .row-cols-xl-8 > * {
        flex: 0 0 12.5%;
        max-width: 12.5%
    }
}

.icon-demo {
    background-color: var(--bs-tertiary-bg);
    background-image: radial-gradient(circle, var(--bs-border-color) 1px, rgba(0,0,0,0) 1px);
    background-size: 1rem 1rem
}

    .icon-demo .bi,
    .icon-demo-examples .bi {
        width: 1em;
        height: 1em
    }

.py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important
}
.text-body-secondary {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important
}

.text-body-tertiary {
    --bs-text-opacity: 1;
    color: var(--bs-tertiary-color) !important
}

.text-body-emphasis {
    --bs-text-opacity: 1;
    color: var(--bs-emphasis-color) !important;
}

.text-reset {
    --bs-text-opacity: 1;
    color: inherit !important
}

.text-opacity-25 {
    --bs-text-opacity: .25
}

.text-opacity-50 {
    --bs-text-opacity: .5
}

.text-opacity-75 {
    --bs-text-opacity: .75
}

.text-opacity-100 {
    --bs-text-opacity: 1
}

.text-primary-emphasis {
    color: var(--bs-primary-text) !important
}

.text-secondary-emphasis {
    color: var(--bs-secondary-text) !important
}

.text-success-emphasis {
    color: var(--bs-success-text) !important
}

.text-info-emphasis {
    color: var(--bs-info-text) !important
}

.text-warning-emphasis {
    color: var(--bs-warning-text) !important
}

.text-danger-emphasis {
    color: var(--bs-danger-text) !important
}

.text-light-emphasis {
    color: var(--bs-light-text) !important
}

.text-dark-emphasis {
    color: var(--bs-dark-text) !important
}

.icon-demo-box {
    box-shadow: 1px 1px 1px 1px #aaa;
}

    .icon-demo-box:hover {

        color: var(--primary);
    }