@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --bg-color: #fffdf7;
    --text-color:  #473144;
    --link-color: #a9e4ef;
    --nav-color: #AF1B3F;
    --nav-hover: #FBB13C;
    --border-color: #EFC69B;
    --book-title-color: var(--nav-color);
    --cta-color:  var(--nav-color);
    --bg-color: #FCFCFC;

    --border: 2px solid var(--border-color);

    /* ---------- FONTS ---------- */
    --heading-font: "Lora", Impact, serif;
    --body-font: Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box 
}

body {
    margin: 0px;
    background-color: var(--bg-color);
    font-family: var(--body-font);
    color: var(--text-color);
}

#site-title {
    font-size: 35px;
    text-align: center;
    font-family: var(--heading-font);
    color: var(--text-color);
    padding: 10px;
}

.nav-container {
    display: grid;
    grid-template-columns: 80px 80px 80px;
    justify-content: end;
    border-top: var(--border);
    border-bottom: var(--border);
    font-weight: 700;
    font-style: bold;
    list-style: none;
    font-size: 20px;
    gap: 10px;
    padding: 10px;
}

.nav-container > li > a {
    text-decoration: none;
    color: var(--nav-color);
}

.nav-container > li > a:hover {
    color: var(--nav-hover);
}


main {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    grid-template-rows: auto;      
    gap: 20px;                   
    align-items: start;
    grid-auto-flow: column;         
}

#filters {
    border: var(--border);
    grid-column: 2;
    justify-self: end;
    margin-right: 20px;
    padding: 10px;
    font-weight: 400;
    font-style: normal;
    grid-row: 1/-1;
    height: 100%;
}   


.book-review {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    grid-column-start: 1;
    grid-column-end: 2;

}

.book-content {
    border-left: var(--border);
    padding-left: 20px;
}

.book-title {
    margin-top: 0px;
    font-family: var(--heading-font);
    color: var(--book-title-color);
    font-weight: 900;
    font-style: normal;
}

.book-image {
    display: block;
    margin: auto;
}

.book-description {
    font-weight: 400;
    font-style: normal;
}

.cta {
    text-decoration: none;
    color: var(--cta-color);
    font-weight: bold;
}

.post-metadata {
    text-align: right;
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-weight: 500;
    font-style: normal;
}

.skiptocontent a {
    position: absolute;
    top: -100px;
    background-color: rgb(255, 106, 106);
    color: #1A181B;
    font-size: 25px;
}

.skiptocontent a:focus {
    top: 100px;
    padding: 15px;
}