:root{
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #1d0c0e;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary:  #be43be;
    --secondary:  var(--primary);
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #F3F6FF;
    --dark: #1A1A1A;
    

}




*{
    margin: 0px;
    padding: 0px;

}


html,body{
    
    width: 100%;
    height: 100%;

}

#header_img{
    background-image: url(images/difbooks.jpg);
    background-attachment: fixed;
   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover ;
    height:18rem;
    max-width: 100%;
    position: relative;
   
   
}


nav{
    background-color:var(--primary) ;
}

.overlay{
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255,0.8);
    position: absolute;
    left: 0px;
    
}




.mycontainer {
    max-width: 1298px;
    margin: auto;
    position: relative;
  } 

#header_img > p{
    position: absolute;
    top: 20%;

    right: 10%;
    left: 10%;
    /* text-shadow: 6px 6px 10px var(--primary); */
    
    color: black!important;
    font-weight: bolder;
    z-index: 1;
   
    
}

.row{
    position: relative;

}

nav a{
    color: white !important;
}

nav button{
color: white !important;
}



#topbar{
    height: 20px;
    background-color: var(--primary);

}

#innertopbar{
    height: 2px;
    background-color: var(--primary);
    margin-top: 0.5rem;
   
}
#deepinnertopbar{
    height: 4px;
    background-color: var(--primary);
    
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 10px;
    margin-left: 10px;

}



tbody > tr> td  .book {
    background-color: var(--primary);
    display: flex;
    flex-wrap: wrap;
    
    justify-content: center;
    align-items: center;
    margin: auto;


}

td{
    position: relative;
}









section{
    margin-top: 5rem;
    background-color: white;
    
}


.accordion{
    margin-top: 1rem;
    position: relative;
   
}






/* slideshow begins */


#carouselExampleSlidesOnly  p {
    font-family: 'Fredoka One', cursive;
    text-align: center;
    
    
}

.quotes{
    margin-top: 2rem;
    background-color: transparent;
    height: 10rem;
 
    width: 50%;
    margin-bottom: 1rem
   
 

}

.quotes q{
    font-family: 'Carme', sans-serif;

}








/* slideshow ends */