:root {
    --rows: 10;
    --columns: 4;
    --header-font: "Roboto Slab";
    --backup-header-font: "serif";
    --body-font: "Comic Neue";
    --backup-body-font: "cursive";
}

body {
    font-family: var(--body-font) var(--backup-body-font);
    font-size: 20px;
    display: grid;
    grid-template-columns: 4fr 1fr 0.5fr 7fr 1fr 1fr;
    grid-template-rows: repeat(var(--rows), minxmax(auto, 1fr));
    column-gap: 5px;
    row-gap: 5px;
}

p {
   line-height: 1.4;
}

.cell {
    font-family: var(--body-font), serif;
    padding: 8px 10px;
    background-color: hsl(222, 65%, 80%);
    color: hsl(222, 100%, 5%);
    border-radius: 5px;
}

img {
    width: 50%;
    height: auto;
}

.cell:nth-child(12n - 4),
.cell:nth-child(12n - 3),
.cell:nth-child(12n - 2),
.cell:nth-child(12n - 1),
.cell:nth-child(12n),
.cell:nth-child(12n + 1){
    background-color: hsl(222, 16%, 88%);
}

.cell:nth-child(1),
.cell:nth-child(2),
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(5),
.cell:nth-child(6) {
    font-family: var(--header-font), var(--backup-header-font), serif;
    font-size: 24px;
    font-weight: bold;
    background-color: hsl(222, 35%, 55%);
    color: hsl(222, 0%, 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.author {
    text-align: center;
}

a {
    color: hsl(222, 100%, 55%);
}

a:visited {
    color: hsl(222, 100%, 55%);
}

a:hover {
    color: hsl(222, 100%, 65%);
}

@media screen and (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--rows), minxmax(auto, 1fr));
        grid-gap: 0;
    }

    img {
        max-width: 200px;
    }

    .cell {
        border-radius: 0;
        background-color: hsl(222, 16%, 88%);
    }

    .cell:nth-child(12n - 4),
    .cell:nth-child(12n - 3),
    .cell:nth-child(12n - 2),
    .cell:nth-child(12n - 1),
    .cell:nth-child(12n),
    .cell:nth-child(12n + 1) {
        background-color: hsl(222, 65%, 80%);
    }

    .cell:nth-child(6n - 4) {
        border-radius: 25px 25px 0px 0px;
        text-align: center;
    }

    .cell:nth-child(6n + 1) {
        border-radius: 0px 0px 25px 25px;
        margin-bottom: 10px;
    }

    .cell:nth-child(6n - 4) > p {
        font-weight: bold;
        font-size: 1.2em;
        font-family: var(--header-font), var(--backup-header-font), serif;
    }

    .cell:nth-child(n)::before {
        font-size: 1.2em;
        font-weight: bold;
    }

    .cell:nth-child(6n - 3)::before {
        content: "By";
    }

    .cell:nth-child(6n - 2)::before {
        content: "Finished Reading?";
    }

    .cell:nth-child(6n - 1)::before {
        content: "Summary ";
    }

    .cell:nth-child(6n)::before {
        content: "Date Purchased";
    }

    .cell:nth-child(6n + 1)::before {
        content: "Date Finished";
    }

    .cell:nth-child(1),
    .cell:nth-child(2),
    .cell:nth-child(3),
    .cell:nth-child(4),
    .cell:nth-child(5),
    .cell:nth-child(6) {
        display: none;
    }
}