/* reset CSS */
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0; 
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
  }


/* to reduce redundancy */
  :root {
    --color-bg: rgb(32, 28, 28);
    --color-card: #8c8787;
    --color-primary: #312e34;
    --color-white: #fff;
    --color-light: rgba(255,255,255,0.6);
    
    
    --transition: all 400ms ease;
    
    --container-width-lg:75%;
    --container-width-md:86%;
    --container-width-sm: 90%;

    --transparent: opacity: 0.5
    }
    
    body {
     background-color: var(--color-bg);
     font-family: 'Kanit', sans-serif;
     color:var(--color-white);
    }



















/* custom classes */



.container {
    width: var(--container-width-lg);
    margin:0 auto;
   
}



/* header */

.header {
    text-align: center;
    margin: 1rem 0;
}


.header-title {
    font-size: 1.7em;
}








/* add book card */

.card {
    border: 5px var(--color-card) solid;
    background-color:var(--color-card);
    border-radius: 1.5em;
   text-align: center;
   width:max-content;
   height:max-content;
   padding:1.5rem;
   line-height: 2.5rem;
}


.add_book_card {
display:flex;
justify-content: center;
}


.card-title {
font-size: large;
}


.input-section label {
margin-right:1.5rem;


}


.input-section input[type=text] {
 height: 25px;
 width: max-content;
 border-radius: 1.5rem;
 

}

#addBook {
width:3rem;
height:2rem;
color: var(--color-primary);
border-radius: 1.5em;
cursor: pointer;
margin-top: 1.8rem;
font-size: 1.2rem;
} 





/* Added books container */

.added_books_container {
 height:50vh;
margin-top: 13em;
display:flex;
flex-wrap: wrap;
gap: 3em;
}


/* books container content */
.bcc_style {
  height:100%;
display:flex;
flex-direction: column;
 justify-items: flex-end;
 gap:10em;
}







.txt_style {
list-style-type: none;
font-size: 1em;
line-height: 2em;

}

.book_card_style {
    border-radius: 1.5rem;
  width:300px;
  height:400px;
  border: 5px solid var(--color-white);
  padding:1em;
  color:var(--color-primary);
  background-color: var(--color-white);
    
}

#btn_section {
display: flex;
gap:2em;
}


.btn {
  display: inline-block;
  border-radius: 1.5em;
  height: 40px;
  width: 70px;
 background-color: red;
 color: var(--color-white);
 cursor: pointer;
 font-weight: bold;
}


.read_btn {
background-color: rgb(62, 201, 62);
}


/* @media screen {
    
} */