.book-card {
    max-width: 200px;
}

.listing-container {
    display: flex;
    gap: var(--s0);

    @media (max-width: 576px) {
        flex-direction: column;
        justify-content: center;
    }
}

.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--s0);
    flex-wrap: wrap;

    li.right {
        margin-inline-start: auto;
    }
}

.messages {
    &>li {
        padding: var(--s0);
        border: 1px solid transparent;
        margin-block: 0;
    }

    &>li+li {
        margin-block-start: var(--s-1);
    }

    & .debug {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

    & .info {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

    & .success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    & .warning {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

    & .error {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }
}

.helptext {
    font-size: 0.8rem;
    color: var(--muted);
}

.button {
    display: block;
    width: fit-content;
    text-align: center;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 6px 6px 0 var(--primary);
    font-size: 14px;
    letter-spacing: 1px;
    transition: all 0.1s ease;

    &:visited {
        color: #fff;
    }

    &:hover {
        color: #fff;
        transform: translate(3px, 3px);
        box-shadow: 3px 3px 0 var(--primary);
    }

    &:active {
        transform: translate(6px, 6px);
        box-shadow: none;
    }
}

/* Speech Bubble mostly from: https://codepen.io/MarkBoots/pen/RwLPXgJ */

[speech-bubble],
[speech-bubble] * {
    box-sizing: border-box
}

[speech-bubble] {
    --bbColor: var(--primary-background);
    --bbArrowSize: 1.5rem;
    --bbPadding: 1rem;
    background: var(--bbColor);
    padding: var(--bbPadding);
    position: relative;
}

[speech-bubble]::before {
    content: '';
    position: absolute;
    background: var(--bbColor);
}

[speech-bubble][pbottom] {
    margin-bottom: var(--bbArrowSize)
}

[speech-bubble][ptop] {
    margin-top: var(--bbArrowSize);
}

[speech-bubble][pleft] {
    margin-left: var(--bbArrowSize);
}

[speech-bubble][pright] {
    margin-right: var(--bbArrowSize);
}


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before {
    --width: calc(var(--bbArrowSize) / 2 * 3);
    height: var(--bbArrowSize);
    width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before {
    top: calc(100% - 2px);
}

[speech-bubble][pbottom][aleft]::before {
    left: 1rem;
    clip-path: polygon(25% 0, 100% 0, 0% 100%)
}

[speech-bubble][pbottom][acenter]::before {
    left: calc(50% - var(--width) / 2);
    clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}

[speech-bubble][pbottom][aright]::before {
    right: 1rem;
    clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
[speech-bubble][ptop]::before {
    bottom: calc(100% - 2px);
}

[speech-bubble][ptop][aleft]::before {
    left: var(--bbPadding);
    clip-path: polygon(0 0, 100% 100%, 25% 100%)
}

[speech-bubble][ptop][acenter]::before {
    left: calc(50% - var(--width) / 2);
    clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}

[speech-bubble][ptop][aright]::before {
    right: var(--bbPadding);
    clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before {
    --height: calc(var(--bbArrowSize) / 2 * 3);
    width: var(--bbArrowSize);
    height: var(--height);
}

/* right */
[speech-bubble][pright]::before {
    left: calc(100% - 2px);
}

[speech-bubble][pright][atop]::before {
    top: var(--bbPadding);
    clip-path: polygon(100% 0, 0 100%, 0 25%)
}

[speech-bubble][pright][acenter]::before {
    top: calc(50% - var(--height) / 2);
    clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}

[speech-bubble][pright][abottom]::before {
    bottom: var(--bbPadding);
    clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
[speech-bubble][pleft]::before {
    right: calc(100% - 2px);
}

[speech-bubble][pleft][atop]::before {
    top: var(--bbPadding);
    clip-path: polygon(0 0, 100% 25%, 100% 100%)
}

[speech-bubble][pleft][acenter]::before {
    top: calc(50% - var(--height) / 2);
    clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}

[speech-bubble][pleft][abottom]::before {
    bottom: var(--bbPadding);
    clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
[speech-bubble][pbottom][flip]::before,
[speech-bubble][ptop][flip]::before {
    transform: scaleX(-1)
}

[speech-bubble][pleft][flip]::before,
[speech-bubble][pright][flip]::before {
    transform: scaleY(-1)
}