@import "/fonts/Archivo.css";
@import "/fonts/LeagueGothic.css";
@import "/fonts/Manuale.css";

:root { --book-width: 10rem; }

/* Shelves */

@media screen {
    .shelf {
        display: grid;
        grid-template-columns: [shelf-start] repeat(auto-fit, minmax(calc(var(--book-width) + 0.5rem), auto)) [shelf-end];
        gap: 0.5rem;
    }

    .shelf > h2 { grid-column: shelf-start / shelf-end; }
}

/* Default book layout, font, and colors */

@media print {
    .book > h3, .book > p, .book > h3::after,
    .book > p::before { display: inline; font-size: 1em; }
    .book > h3::after { content: ","; }
    .book > p::before { content: "by "; }
}

@media screen {
    .book {
        align-items: center;
        aspect-ratio: 9 / 16;
        border: 1px solid black;
        box-shadow: #ccc 4px 4px;
        cursor: pointer;
        display: grid;
        font-family: Manuale, ui-serif, serif;
        grid-template-rows: repeat(4, 1fr);
        justify-items: center;
        max-width: var(--book-width);
        padding-inline: 0.5rem;
        text-align: center;
    }
    .book a { text-decoration: none; }
    .book > h3 {
        font-family: inherit;
        font-size: 1.3em;
        font-weight: normal;
        grid-row: 1 / 4;
        line-height: 1.2;
        margin: 0;
        text-wrap: balance;
    }
    .book > p {
        grid-row: 4 / 5;
        margin: 0;
    }
}

@media (prefers-color-scheme: dark) {
    .book {
        box-shadow: #333 4px 4px;
    }
}

@media screen {
    .book {
        background-color: saddlebrown;
        color: white;
    }
    .book :link, .book :visited { color: currentColor; }

    @supports (width: random(1px, 1px, 1px)) and (color: contrast-color(white)) {
        .book {
            --r: random(--r, 0, 1);
            --g: random(--g, 0, 1);
            --b: random(--b, 0, 1);
            background-color: color(srgb var(--r) var(--g) var(--b));
            color: contrast-color(color(srgb var(--r) var(--g) var(--b)));
        }

        @media (color-gamut: display-p3) {
            background-color: color(display-p3 var(--r) var(--g) var(--b));
            color: contrast-color(color(display-p3 var(--r) var(--g) var(--b)));
        }
    }
}

/* Per-era book layout, font, and colors */

@media screen {
    #ancient .book { font-family: Herculanum, Manuale, ui-serif, serif; }
    #renaissance .book { font-family: Palatino, Garamond, Manuale, ui-serif, serif; }
    #regency .book { font-family: Baskerville, Manuale, ui-serif, serif; }
    #victorian .book { font-family: Didot, Manuale, ui-serif, serif; }
    #victorian .book > h3 { font-weight: bold; }
    #early20th .book { font-family: Futura, "Gill Sans", Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif; }
    #depression .book { font-family: Times, "Times New Roman", Manuale, ui-serif, serif; }
    #fifties .book { font-family: Helvetica, Arial, sans-serif; }
    #sixties .book { font-family: Helvetica, Arial, sans-serif; }
    #nineties .book { font-family: Charter, Georgia, Manuale, ui-serif, serif; }
}

/* Per-genre book layout, font, and colors */

@media screen {
    .comics,
    #nineties .comics {
        font-family: Noteworthy, "Marker Felt", "Comic Sans MS", cursive;
        line-height: 2;
    }

    .KidLit,
    #depression .KidLit,
    #early20th .KidLit,
    #fifties .KidLit,
    #sixties .KidLit,
    #nineties .KidLit {
        font-family:  Noteworthy, "Marker Felt", "Comic Sans MS", cursive;
        line-height: 2;
    }

    .fantasy,
    #depression .fantasy,
    #early20th .fantasy,
    #fifties .fantasy,
    #sixties .fantasy,
    #nineties .fantasy {
        font-family: Luminari, Papyrus, cursive;
    }

    .horror,
    #regency .horror {
        font-family: Papyrus, cursive;
    }

    .poetry,
    #nineties .poetry { font-family: cursive; }
    .poetry {
        align-items: start;
    }
    .poetry > h3 {
        font-size: 1.5em;
        grid-row: 2 / 5;
    }
    .poetry > p {
        font-size: 1.25em;
        grid-row: 1 / 2;
        padding-top: 1ch;
        text-align: left;
    }

    .romance, #regency .romance { font-family: cursive; }
    .romance > h3, #regency .romance > h3 {
        font-size: 1.5em;
    }
    .romance > p, #regency .romance > p {
        font-size: 1.25em;
    }

    .science,
    #victorian .science,
    #nineties .science { font-family: Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif; }

    .scifi,
    #early20th .scifi,
    #fifties .scifi,
    #sixties .scifi,
    #nineties .scifi,
    #victorian .scifi { font-family: Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif; }
    .scifi > h3 {
        align-self: start;
        font-size: 1.3em;
        grid-row: 2 / 5;
    }
    #victorian .scifi > h3 { font-weight: normal; }
    .scifi > p {
        border-bottom: 2px solid currentColor;
        font-size: 1.1em;
        font-variant: small-caps;
        grid-row: 1 / 2;
        text-align: right;
        width: 100%;
    }

    .book.star-trek,
    #nineties .star-trek {
        font-family: "DIN Condensed", Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-style: normal;
        font-stretch: condensed;
        line-height: 1;
        text-transform: uppercase;
    }
    .book.star-trek > h3,
    #nineties .star-trek > h3 {
        font-size: 2em;
        margin: 0.25em 0 0 0;
    }
    .book.star-trek > p,
    #nineties .star-trek > p {
        font-size: 1.75em;
        font-variant: inherit;
        margin: 0.25em 0;
    }

    .tech { font-family: Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif; }
}

/* Per-language book layout, font, and colors */

@media screen {
    .book:lang(ja), .book:lang(zh) {
        font-size: 1.3em;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        padding-inline: none;
        text-align: left;
        align-items: unset;
    }
    .book:lang(ja) > h3, .book:lang(zh) > h3 {
        grid-column: 3 / 4;
        writing-mode: vertical-rl;
        grid-row: 1 / 2;
        padding-inline: 1ic;
        font-size: 1em;
    }
    .book:lang(ja) > p, .book:lang(zh) > p {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding-inline: 1ic;
        writing-mode: vertical-rl;
        text-align: right;
    }
}

/* Per-book book layout, font, and colors */

@media screen {
    .book.all-about-love,
    #nineties .book.all-about-love {
        background-color: #e22b2e;
        color: black;
        font-family: Didot, Georgia, serif;
    }
    .book.all-about-love > h3 {
        font-size: 3em;
        font-style: italic;
        text-transform: lowercase;
    }
    .book.all-about-love > p {
        font-size: 1.7em;
    }

    .book.GEB {
        font-family: Didot, Manuale, ui-serif, serif;;
        text-transform: uppercase;
        background-color: black;
        color: white;
    }
    .book.GEB > h3 { font-size: 2em; }
    .book.GEB > p { color: gold; }

    .book.girls-can-kiss-now {
        background-color: #4700ff;
        color: white;
        font-family: Futura, "Gill Sans", Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }
    .book.girls-can-kiss-now > h3 {
        color: #f091f0;
        font-size: 2.25em;
    }

    .book.nevada {
        font-family: Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        background-color: #e75423;
        color: #e4e5b8;
    }
    .book.nevada > h3 {
        grid-row: 2 / 4;
        font-size: 2em;
        font-style: italic;
        color: #d5d965;
    }
    .book.nevada > p {
        font-size: 1.2em;
        grid-row: 1 / 2;
    }

    .book.oh-no {
        background-color: #75b1ff;
        color: black;
        border: 4px solid black;
    }
    .book.oh-no > h3 {
        background-color: #90e0a2;
        border: 4px solid black;
        padding: 0.5ch 1ch 1ch 1ch;
        border-radius: 50%;
        grid-row: 2 / 3;
        line-height: 1;
    }
    .book.oh-no > p {
        grid-row: 3 / 4;
        background-color: #fef782;
        border: 4px solid black;
        padding-inline: 1ch;
        border-radius: 50%;
    }

    .book.on-tyranny {
        background-color: #eae2d8;
        border: 2px double #a16055;
        color: black;
        font-family: "League Gothic";
        letter-spacing: 0.2em;
        text-transform: uppercase;
        border-top: none;
        border-bottom: none;
    }
    .book.on-tyranny > h3 {
        grid-row: 1 / 2;
        align-self: end;
    }
    .book.on-tyranny > p {
        border-top: 2px double #a16055;
        grid-row: 2 / 3;
        align-self: start;
    }

    .book.red-mars { background-color: #b7281a; }
    .book.green-mars { background-color: #306a37; }
    .book.blue-mars { background-color: #1b3f7d; }
    .book.red-mars, .book.green-mars, .book.blue-mars {
        color: white;
    }

    .book.stephen-king > h3 { font-size: 2em; }
    .book.stephen-king.it > h3 { font-size: 5em; }

    .book.the-color-purple {
        background-color: #f0e5cb;
        color: #695dae;
        font-family: Luminari, cursive;
        text-align: right;
        align-items: end;
    }
    .book.the-color-purple > h3,
    .book.the-color-purple > p {
        font-size: 2em;
        margin: 0;
    }
    .book.the-color-purple > h3 {
        color: #3e286d;
        grid-row: 1 / 3;
    }
    .book.the-color-purple > p {
        grid-row: 3 / 5;
    }
    .book.the-color-purple > p::before {
        content: "by ";
        display: inline;
    }

    .book.the-locked-tomb {
        background-color: black;
        color: white;
        border-right: 1ch solid #bb5c2b;
        text-transform: uppercase;
        font-family: Manuale, ui-serif, serif;
    }
    .book.the-locked-tomb > h3 {
        align-self: start;
        grid-row: 2 / 5;
        font-size: 2em;
    }
    .book.the-locked-tomb > p {
        grid-row: 1 / 2;
        font-size: 1.5em;
        color: #bb5c2b;
        font-variant: inherit;
        border: none;
        text-align: center;
    }

    .book.the-transgender-issue {
        align-items: center;
        background-color: #e0303b;
        color: white;
        font-family: Impact;
        text-transform: uppercase;
        padding: 0 1rem 0 0;
    }
    .book.the-transgender-issue > h3,
    .book.the-transgender-issue > p {
        background-color: white;
        color: black;
        font-size: 1.75em;
    }
    .book.the-transgender-issue > h3 {
        text-align: left;
        justify-self: left;
    }
    .book.the-transgender-issue > p {
        text-align: right;
        justify-self: right;
    }

    .book.this-devastating-fever {
        background-color: #220545;
        color: white;
        font-family: Futura, "Gill Sans", Archivo, ui-rounded, system-ui, Helvetica, Arial, sans-serif;
        text-transform: uppercase;
    }
    .book.this-devastating-fever > h3 {
        background-color: #f26834;
        font-size: 1.4em;
        padding: 4px;
    }
    .book.this-devastating-fever > p {
        background-color: #fcb933;
        font-size: 0.8em;
        padding: 4px;
    }
    .book.this-devastating-fever > h3,
    .book.this-devastating-fever > p { color: #220545; }

    .book.watchmen {
        background-color: black;
        color: yellow;
        font-family: Tahoma, sans-serif;
        font-weight: bold;
        padding: 0 1rem 0 0;
        text-transform: uppercase;
    }
    .book.watchmen > h3 {
        grid-row: 1 / 5;
        grid-column: 1;
        align-self: center;
        font-size: 2.75em;
        font-weight: bold;
        justify-self: start;
        line-height: 1;
        margin: 0;
        writing-mode: sideways-lr;
    }
    .book.watchmen > p {
        grid-row: 4 / 5;
        grid-column: 2;
    }

    .book.with-teeth {
        background-color: #c9ddb7;
        color: #2b2b2b;
        font-family: "DIN Condensed", Helvetica, Arial, sans-serif;
        font-stretch: condensed;
        text-transform: uppercase;
    }
    .book.with-teeth > h3 {
        border: 0.5em solid #f89728;
        border-radius: 50%;
        background-color: #2b2b2b;
        color: #f6ebd8;
        font-size: 1.75em;
        padding: 0.25em;
        padding-bottom: 0;
    }
    .book.with-teeth > p {
        font-size: 1.5em;
    }
}