@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
:root{
---Gold_color: #EFC69B;
---Red_color: #AF1B3F;
---Dark_color: #473144;
---headline:"Lora", serif;
}

p{
    font-family: Arial, Helvetica, sans-serif;
}

h1{
    text-align: center;
    border-bottom: solid 3px var(---Gold_color);
    padding: 40px;
    font-family: var(---headline);
}

nav{
    border-bottom: var(---Gold_color) solid 3px;
}

nav ul{
    display: flex;
    list-style: none;
    justify-content: flex-end;
    margin-right: 60px;
    gap: 30px;
    }


nav ul li a{
    text-decoration: none;
    color: var(---Red_color);
}

header{
    margin-bottom: 20px;
}

main{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.introduction{
    display: flex;
    flex-direction: column;
    align-items: end;
    border-right: solid var(---Gold_color) 2px;
}

.introduction p{
    margin: 3px;
}
section{
    padding:20px 50px;
}

h2{
    color:var(---Red_color)
}

.book_img img{
    display: block;
    margin: 0 auto;
}


footer{
    border-top: solid var(---Gold_color) 2px;
    margin-top: 30px;
    text-align: center;
}


@media screen and (max-width:768px) {
    .introduction{
    display: flex;
    flex-direction: column;
    align-items: end;
    border-top: solid var(---Gold_color) 2px;
    border-right: none;


}

main{
    display: flex;
    flex-direction: column;
}
    
}