.bg-purple {
    background-color: var(--bs-purple);
}
.text-purple {
    color: var(--bs-purple);
}

.navbar {
    background: linear-gradient(to right, #0f3e5a, #1e4562)
}

main > article {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
}

.author {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 5rem;
    min-width: 5rem;
    line-height: 1;
    border-radius: 50%;
    font-size: 3rem;
    color: white;
    background-color: var(--bs-secondary);
    margin-right: 1rem;
    vertical-align: middle;
}
.author.male {
    background-color: var(--bs-blue);
}
.author.female {
    background-color: var(--bs-pink);
}

/**
 * Based on Bootstrap "Cheatsheet" Example
 * https://getbootstrap.com/docs/5.1/examples/cheatsheet/
**/

/* Table of contents */
main > aside a {
    display: block;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    color: rgba(0, 0, 0, .65);
    text-decoration: none;
}

main > aside a:hover,
main > aside a:focus {
    color: rgba(0, 0, 0, .85);
    background-color: rgba(121, 82, 179, .1);
}

main > aside .active {
    font-weight: 600;
    color: rgba(0, 0, 0, .85);
}

main > aside .group {
    display: flex;
    padding: .25rem .225rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    border: 0;
}
main > aside .group + ul {
    margin-left: 1.25em;
}

main > aside .group:hover,
main > aside .group:focus {
    color: rgba(0, 0, 0, .85);
    background-color: rgba(121, 82, 179, .1);
}

main > aside .group:focus {
    box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
}

main > aside .group::before {
    min-width: 1.5em;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform .35s ease;
    transform-origin: .5em 50%;
    text-align: center;
}
main > aside nav.home .group::before,
main > aside .group.folder::before {
    content: "\f07b"; /* fa-folder */
}
main > aside nav.section .group::before,
main > aside nav.home .group.file::before {
    content: "\f15b"; /* fa-file */
}
main > aside nav.page .group::before,
main > aside nav.section .group.item::before {
    content: "\f466"; /* fa-box */
}
/* Layout */
@media (min-width: 1200px) {
    main {
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-template-rows: auto;
    }
    main > article,
    main > aside {
        padding-top: 1rem;
    }
}