*{
    margin: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'kugile';
    src: url('Fonts-about-page/Kugile_Demo.ttf');
}
@font-face {
    font-family: rekalgera;
    src: url('Fonts-about-page/Rekalgera-Regular.otf');
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: #F9FBFA;
}
header{
    background-color: #282119;
    justify-items: center;
    padding: 0.5em;
    position: sticky;
    top:0;
    z-index: 1000;
    ul{
        list-style-type: none;
    }
    >ul >li{
        display: inline;
        padding: 0.8em 2em;
        color: #ffffff;
        font-size:22px;
        font-weight: bold;
    }

    .nav{
        text-decoration: none;
        color:#ffffff;
        font-size:22px;
        font-weight: bold;
    }
    >ul li:hover{
        background-color: #ffffff;
        color:#000000;
        .nav, p {
            color: black;
        }
    }

}

.reviews , .read{
    position: relative;
    display:inline-block;
    p{
        font-size:22px;
        margin-right: 25px;
        color:white;
    }
}
.book-shelf, .reviewers{
    background-color:#2f4356;
    border-radius: 20px;
    display:none;
    position:absolute;
    top:90%;
    
    li{
        color: rgb(255,255,255);
        border-bottom:white 2px dotted;
        margin: 0 2px;
    }
    a{
        color: rgb(255,255,255);
    }
    a:hover{
        color: rgb(25,25,25);
    }
}
.book-shelf{
    width:350px;
    padding: 10px;
    left:-50%;
}
.reviewers{
    width:280px;
    padding: 10px;
    left:-50%;
}
.read:hover .book-shelf , .reviews:hover .reviewers{
    display:block;
}

.main{
    padding-bottom: 5%;
    justify-items: center;
    color:#2f4356;

    a{
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        font-family: kugile; 
        font-weight: bold;   
         color:#ffffff;   
    }

    button{
        border-radius: 30px;
        border:none;
        padding: 1em 5em;
        margin:5em 2em;
        background-color: #2f4356;
    }
    button:hover{
        background-color: white;
        border:solid 2px #2f4356;
        a{
            color: #2f4356;
        }
    }
    p{
        color:#282119;
        margin-top: 2%;
        font-size: 20px;
        letter-spacing:5px;
    }
    .fa-quote-left, .fa-quote-right{
        color:#2f4356;
        margin: 10px 20px;
    }
}

#about{
    width:50%;
    margin:auto;
    font-size: 20px;
    text-align: justify;
    line-height: 1.5;
    justify-items: center;
    box-shadow:3px 5px 10px black;
    padding: 5%;
    border-radius: 10px;
    h1{
        color: #2f4356;
    }
}


.title{
    font-size: 80px;
    margin-top: 3%;
}
.reading-quote{
    padding: 2% 25% 0% 25%;
    text-align: center;
    font-family: kugile;
    color:#282119;
}
.blog-divider{
    justify-items: center;
    margin:5%;
    img{
        display: block;
        max-width: 100%;
    }
}
#reviewed-books{
    display:flex;
    flex-direction: column;
    gap:10px;
    width: 90%;
    margin: auto;
    padding-top:3%;
}

.book-summary{
    justify-items: center;
    h1{
        color: #2f4356;
        font-size: 50px;
    }
    p{
        padding: 5% 5% 0 5% ;
        font-size: 130%;
        line-height: 2;
        text-align:justify;
    }
    a{
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        font-family: kugile; 
        font-weight: bold;   
         color:#2f4356;   
    }

    button{
        background-color: #ffffff;
        border:solid #2f4356 2px;
        border-radius: 30px;
        padding: 1em 5em;
        margin: 2em;
    }
    button:hover{
        background-color: white;
        border:solid 2px #97602b;
    }
}

.spread{
    color:#2f4356;
    font-size: 50px;
}


.who-moved-my-cheese ,.born-a-crime {
    padding-top: 2%;
    display: flex;
    width:100%;
    gap:20px;
    margin: 2% auto;
}
.about-review{
    display: flex;
    flex-direction: row-reverse;
    border: 1px black solid;
    padding: 2%;
}
.book-image{
    align-content: center;
    .book-picture{
        width:250px;
        height:300px;
        box-shadow:3px 5px 10px black;
        margin-bottom: 10px;
    }

    .amazon{
        width: 100px;
        height:50px;
        margin: -10%;
    }
} 

.book-quote{
    width: 100%;
    height:300px;
    position: relative;
    padding-top: 2%;
    margin-left: 5%;
    margin-top: 5%;
    justify-content: center;
    border-radius: 30px;
    box-shadow:3px 5px 10px black;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('Images-about-page/image.jpg');
    background-position: center;
    color: white;
    h5{
        margin-top: 30%;
        text-align: center;
    }
}
.quote{
    font-size: 20px;
    font-family:kugile;
    font-weight:900;
    position: absolute;
    text-align: center;
    opacity:0;
    margin-top: 20px;
    padding: 0 20%;
    margin-right: 10px;  
    animation:12s infinite;
}

.quote:nth-child(1){
    animation-name: swap;
    animation-delay: 0s;
}
.quote:nth-child(2){
    animation-name: swap;
    animation-delay: 4s;
}
.quote:nth-child(3){
    animation-name: swap;
    animation-delay: 8s;
}
.book-quote:hover .quote{
    animation-play-state: paused;
}
@keyframes swap{
    0%, 100% {opacity:0; transform:translateY(20px);}
    5%, 30% {opacity:1; transform:translateY(0);}
    35%, 100% {opacity:0; transform:translateY(-20px);}
}

#individual-blogs{
    margin: 10% auto 5%;
    width:80%;
    justify-items: center;
    justify-content: space-evenly;
    display:grid;
    grid-template-columns: auto auto;
    gap: 30px;
    padding: 10px;
    a{
        text-decoration: none;
        font-weight: bold;
        font-family: kugile; 
        color:white;
    }

    button{
        background-color: #2f4356 ;
        border:none;
        border-radius: 100px;
        padding: 1em 3em;
    }
    button:hover{
        background-color: white;
        border:2px solid #2f4356;
        a{
            color: #2f4356;
        }
    }
    span{
        font-weight: bolder;
        border-radius: 100%;
    }
}

.button-elizabeth{
    margin-top: 24%;
}

.button-hewan{
    margin-top: 34%;
}

.button-nebyat{
    margin-top: 44%;
}

.button-saloi{
    margin-top: 3%;
}

.review-heading, .upcoming-book-heading{
    text-align: center;
    color:#2f4356;
    font-size: 50px;
    margin: 2%;
}

.reviewer{
    justify-content:space-evenly;
    border-radius: 20px;
    box-shadow:3px 5px 10px black;
    width:70%;
    padding-top: 5%;
    padding-bottom: 2%;
}

.reviewer div:nth-child(2){
    justify-items: center;
}

.review-text{
    font-size: 20px;
    width:50%;
}
.name-and-image{
    justify-items: center;
    img{
        width:150px;
        height:150px;
        border-radius: 100px;
        border:#2f4356 3px dotted;
        padding: 2%;
    }
}

.upcoming-book{
    display:flex;
    position: relative;
    justify-content: space-evenly;
    margin:5%;
    .book-picture{
        box-shadow:3px 5px 10px black;
        width: 250px;
        height:350px;
    }

    h2{
        margin-top: 2%;
        color:#ffa41c;
    }

}

.upcoming-book-container{
    width:25%;
    padding: 3%;
    background-color: white;
    justify-items: center;
    box-shadow:3px 5px 10px black;
    border-radius: 50px;
}
.upcoming-review{
    text-align: justify;
    font-size: 20px;  
    padding-top: 5%;  
}

.image-copyright{
    position: absolute;
    left:95%;
    top:20%;
    text-align: center;
    justify-content: center;
    width:8%;
    padding-top: 10px;
    border-radius: 20px;
    box-shadow:3px 5px 5px black;
    .amazon{
        width: 100px;
        height:50px;
    }
}

.update{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('Images-about-page/image.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    justify-items: center;
    width:80%;
    color:white;
    margin: auto  auto 5% auto;
    padding: 10%;
    h1{
        font-family: kugile;
        font-size:50px;
    }
    input{
        display:block;
        padding: 20px 100px 20px 10px;
        border-radius: 10px;
        font-weight: bolder;
        border:none;
    }
    button{
        display:block;
        background-color: #282119;
        color:white;
        font-size: larger;
        border: none;
        padding:10px;
        border-radius: 10px;
    }
}


footer{
    background-color: #282119;
    padding: 1em;
    font-family: kugile;
    color: white;
}

.footer{
    display: flex;
    i{
        padding: 0 10px;
        font-size: 25px;
    }
}

@media only screen and (max-width:500px){
    header{
        justify-items:left;
        >ul >li{
            padding: 5px;
            font-size: 15px;
        }
        .nav{
            font-size: 15px;
        }
    }
    .title{
        font-size: 45px;
        padding: 2%;
        text-align: center;
    }
   .main{
    button{
        margin:2em;
        display: block;
        text-align: center;
    }
   }
   .reading-quote{
    padding: 1em;
    font-size: 25px;
    text-align: center;
    justify-items: center;
   }

   #about{
    width:auto;
   }

   .who-moved-my-cheese, .born-a-crime{
    flex-direction: column-reverse;
   }

   .about-review{
    flex-direction: column;
   }

   #individual-blogs{
    grid-template-columns:auto;
   }

   .reviewer{
    width:auto;
   }
   .review-text{
    width:auto;
    padding: 5px;
   }
   .upcoming-book{
    flex-direction: column;
    gap:20px;
   }
   .upcoming-book-container{
        width:auto;
   }

   .image-copyright{
    left:25%;
    top: 100%;
    width:50%;
    margin-bottom: 10px;
   }

   .update{
    padding: 5% 2%;
    margin-top: 30%;
    h1{
        font-size:25px;
        text-align: center;
    }

    button{
       margin:5px auto;
    }
   }
}