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

:root {
  --primary-color: #AF1B3F;
  --secondary-color: #473144;
  --accent-color: #EFC69B;
  --primary-font: Helvetica, Arial, sans-serif;
  --secondary-font: "Lora", Impact, serif;
}

.skiptocontent a {
    position:absolute;
    top: -40px;
    background-color: #AF1B3F;
}

.skiptocontent a:focus {
    top: 0;
}

main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    font-size: 1.2rem;
}

h1 {
    color: var(--secondary-color);
    font-family: var(--secondary-font);
    font-size: 2.3rem;
    text-align: center;
    padding: 2rem;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    font-family: var(--primary-font);
}

nav {
    border-top: solid 2px var(--accent-color);
    border-bottom: solid 2px var(--accent-color);
    padding: .8rem;
    padding-right: 5rem;
    margin: 0 auto;
    margin-bottom: 1.3rem;
}

.main-nav {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: end;
    justify-items: end;
    gap: 2rem;
    list-style-type: none;
}

a {
    font-size: 1.4rem;
}

h2 {
    color: var(--primary-color);
    font-family: var(--secondary-font);
}

main p {
    color: var(--secondary-color);
    font-family: var(--primary-font);
}

.article {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    grid-column: 1/2;
    margin-bottom: 2rem;
}

.review {
    grid-column: 1/2;
    box-sizing: border-box;
    text-align: right;
    padding: 2rem;
    padding-top: 1rem;
    border-right: solid var(--accent-color);
    margin-right: 2rem;
    line-height: .7rem;
    font-size: 1rem;
}

.books {
    grid-column: 2/3;
}

img {
    display: block;
    margin: auto;
}

.filters {
    border: solid var(--accent-color);
}

.date {
    font-size: 1.3rem;
}

.read-more {
    font-size: 1.2rem;
    text-decoration: underline;
}