body{
    background-color: #eff3f8;
    margin: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#footer{
    border-top: 2px solid black;
    padding-left: 13%;
    margin-top: 15%;
    background-color: #fff;
}

#navbar a{
    text-decoration: none;
}
#navbar input{
    height: 80%;
    font-size: 95%;
}
#navbar button{

    height: 99%;
    margin: 0%;
    font-size: 18px;
}

#navbar input{
    width: 350px;

}
#search_div{
    margin-top: 1%;
    display: flex;
    flex-direction: column;
   
}


#navbar{
    height: 50px;
    background: #1781fa;
    display: flex;
    justify-content: space-around;
    align-items: center;
  

}
#nav-left{
    display: flex;
    gap:80px;
}
#nav-right{
    display: flex;
    gap:30px;
}
#nav-right a{
    font-size: 18px;   
    color: #fff;
}



#brand a{
    font-size: 1.5em;   
    color: yellow;
}
#brand a:hover{ 
    color: rgb(182, 255, 10);
}

/* for container */

#container{
    display: flex;
    flex-direction: column;
    gap: 100px;
}

#img_div{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    /* border: 1px solid black; */
    gap:4%;
}
#sub_div{
    width: 90%;
    margin: auto;
}
#book_div{
    height: 370px;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    text-align: center;
    padding: 5%;
    background-color: #fff;
}


#book_div img{
    width: 100%;
    height: 80%;
    object-fit:fill;
}

#sub_div h1{
    margin: 50px 0;
    /* font-size:larger; */
    text-transform: capitalize;
}

#sub_div h4{
    margin:0;
}

#a_div a{
    cursor: pointer;
    font-size: small;
}

#a_div a:hover{
    color: #1781fa;
    font-size: large;
}

#a_div hr{
    margin: auto;
    height: 22px;
    border-color: rgb(233, 230, 230);
}

#title_div{
    height: 39px;
    overflow: hidden;
}



/* Medium screens */
@media only screen and (min-width: 866px) and (max-width: 915px) {
    #img_div{
        grid-template-columns: repeat(3,1fr);
    }
    
    #navbar input{
        width: 300px;
    }
 
    #brand a{
        font-size: 1.5em;   
    }
}   

@media only screen and (min-width: 421px) and (max-width: 869px) {
    #img_div{
        grid-template-columns: repeat(2,1fr);
    }
    
    #navbar input{
        width: 150px;
    }
 
    #brand a{
        font-size: 20px;   
    }
}   


@media only screen and (min-width: 421px) and (max-width: 716px) {
    #img_div{
        grid-template-columns: repeat(2,1fr);
    }
    
    #navbar input{
        width: 70px;
    }

    #navbar button{
        font-size: 16px;
        height: 24px;
    }
 
    #brand a{
        font-size: 1em;   
    }
    #nav-right a{
        font-size: 12px;   
    }
    #nav-right{
        gap:9px
    }
    #nav-left{
        gap:15px
    }
}   

/* small screens */
@media only screen and (min-width: 70px) and (max-width: 420px) {
    #img_div{
        grid-template-columns: repeat(1,1fr);
    }
   
    
    #navbar input{
        width: 50px;
        font-size: 8px;
        height: 12px;
    }
    #navbar button{
        font-size: 6px;
        height: 18px;
    }
    #brand a{
        font-size: 11px;   
    }
    #nav-right a{
        font-size: 10px;   
    }
    #nav-right{
        gap:8px
    }
    #nav-left{
        gap:8px
    }
    #navbar{
        height: 30px;
    }
}