body {
    font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
  }
  *{
    margin: 0%;
    padding: 0%;
  }

  .nav{
    background-color: #fd1690;
    color: black;
    padding: 15PX;

  }
  .container{
padding: 8px;
  }
  .book-container{
    padding: 8px;
    width: 38%;
background-color:black;
color: white;
border-radius: 20px;
margin: 9px;  
display:inline-block;

vertical-align: top;
  }
@media screen and(max-width:600px) {
.book-container{
    flex-basis: 30%;
    flex-grow: 1fr 1fr;
}
}

.book-container h2{
    color: #fd6;
}
.book-container button{
    background-color: #fd1690;
    color: black;
    padding: 6px;
    margin-top: 10px;
    border-radius: 20px;
    border: none;
}
.add-button{
    position:fixed;
    right: 20%;
    bottom: 98px;
    border-radius: 100%;
    background-color: #fd6432;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 39px;
    border: none;

}
.add-popup-overlay{
position: absolute;
background-color: black;
opacity: 0.7;
width: 100%;
height: 400%;
top:0;
left:0;
display: block;
z-index: 1;
display: none;
}
.popup-box{
background-color:#ff3456;
width: 40%;
padding: 40px;
border-radius: 20px;
position: absolute;
z-index: 3;
top: 20%;
left: 20%;
display: none;
}

.popup-box input{
background: transparent;
width: 100%;
margin: 5px;
padding: 5px;
border: none;
font-size: 20px;
border-bottom: solid black 2px;
}
.popup-box textarea{
    background: transparent;
    width: 100%;
    margin: 5px;
    padding: 5px;
    border: none;
    font-size: 20px;
    border-bottom: solid black 2px;
    }
    .popup-box ::placeholder{
        color: black;
    }
    .popup-box textarea ::placeholder{
        color: black;
    }
    .popup-box button{
background-color:black;
color: beige;
border-radius: 8px;
border: none;
padding: 7px;
margin-left: 8px;
    }
    .popup-box input:focus{
        outline:none;
    }
    .popup-box textarea:focus{
        outline:none;
    }