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

  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style : normal;
  font-variation-settings:
    "wdth" 100;
}
.navbar{
    background-color: brown;
}
.con{
  padding: 10px;

}
.book-con{
  padding: 15px;
  width: 25%;
  background-color: blueviolet;
  border-radius: 15px;
  margin: 30px;
  display: inline-block ;
  vertical-align: top;
}
.book-con h2{
  color: brown;
}
.book-con button{
  background-color: burlywood;
  color: chartreuse;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: none;
  margin-top: 10px;
}
.add-button{
  background-color: aquamarine;
  color: chartreuse;
  border-radius: 100%;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-left: 30px;
  padding-right: 40px;
  font-size: 50px;
  border: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
}
.pop-over{
  background-color: rgb(82, 35, 56);
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}
.opp{
  background-color: rgb(70, 59, 88);
  width: 40%;
  padding: 40px;
  border-radius: 10px;
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 2;
  display: none;
}
.opp input{
  background: transparent;
  border: none;
  width: 100%;
  margin: 5px;
  padding: 5px;
  font-size: 20px;
  border-bottom: solid black 2px;
}
.opp textarea{
  background: transparent;
  width: 100%;
  margin: 5px;
  padding: 5px;
  font-size: 20px;
  border: solid black 2px;
}
.opp input::placeholder{
  color: black;
}
.opp textarea::placeholder{
  color: black;
}
.opp button{
  background-color: black;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: antiquewhite;
  margin: 5px;
}
.opp input:focus{
  outline: none;
}
.opp textarea:focus{
  outline: none;
}