@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
:root {
    --primary-color: #EFC69B;
    --secondary-color: #AF1B3F;
    --accent-color: #473144;
    --border-color: rgb(210, 210, 210);
    /*--text-dark: #333;
    --text-light: #ebebeb;*/
    --primary-font: Helvetica, Arial, sans-serif;
    --secondary-font: Lora, Impact, serif;
    }

body{
    font-family: var(--primary-font);
    margin: 2em;
}

.skiptocontent a{
    position: absolute;
    top:-40px;
}

.skiptocontent a:focus{
    top: 0;
}

h1, h2{
    font-family: var(--secondary-font);
}

h1{
    text-align: center;
    font-size: 3em;
    margin: 1em 0;
}

h2, a{
    color: var(--secondary-color);
}

li{
    list-style-type: none;
}

nav{
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
}

#main-nav{
    display: grid;
    grid-template-columns: 90px 90px 90px;
    justify-content: end;
    margin-right: 2em;
}

a{
    text-decoration: none;
    font-size: 1.2em;
}

.textLink{
    font-size: 1em;
}

main{
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin: 0 1em;
}

summary{
    border-right: 2px solid var(--border-color);
    text-align: right;
}

#bookList li.article{
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin: 2em 0;
}



article{
    margin: 0 1em;
}

.articleDetails{
    margin: 1.5em 0.7em;
}

.articleDetails li{
    margin: 0.5em;
}

time{
    font-size: 1.3em;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

p{
    line-height: 1.5em;
}

aside{
    text-align: left;
    margin: 1.5em 0;
    border: 2px solid var(--border-color);
}