:root {
  --color1: #42032c;
  --color2: #d36b00;
  --color3: #b6b3ae;
  --color4: #a8eb75;
  --color5: #f1efdc;
}
body {
  background-color: var(--color3);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.main {
  width: 100%;
  min-height: 100vh;

  display: grid;
  grid-template: 100px 1fr/1fr;
}

div.nav {
  background-color: var(--color2);
  grid-column: 1/-1;
  grid-row: 1/2;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logo-div {
  display: flex;
  align-items: center;
}
.logo-div #logo-text {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0 10px;
  font-size: 3rem;
}

.logo-div i {
  font-size: 3rem;
}

.main-body {
  grid-column: 1/-1;
  grid-row: 2/-1;
}

.search-div input,.search-div button{
  padding: 5px;
  height: 30px;
  border-radius: 5px;
}

.buttons-nav button{
  padding: 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.buttons-nav button:hover{
  background-color: #b6b3ae;
}

.add-new-button-div {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  bottom: 10px;
  right: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

.add-new-button-div:hover {
  transform: scale(1.05);
  cursor: pointer;
}

#form-div {

  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 5;

  align-items: center;
  justify-content: center;
}

#addBookForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: var(--color5);
  opacity: 0.8;
  width: 50%;
min-height: fit-content;
  border-radius: 10px;
}

#addBookForm label {
  font-size: 20px;
  font-weight: bolder;
}

.input-div {
  width: 90%;
  margin: 10px 0;
}

#addBookForm input {
  font-size: 20px;
  width: 100%;
  height: 40px;
  border-radius: 5px;
}

.checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.books-shelf{
    width: 100%;
    height: 100vh;
    padding: 10px;
}

#books-shelf{
  display: grid;
  grid-template: repeat(auto-fill,minmax(200px,1fr))/repeat(3, 1fr);
  gap: 15px;

}

.card{
  background-color: var(--color5);
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

#books-shelf .card:nth-child(odd){
  background-color: var(--color4);
}
.card h2{
  margin: 5px 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.iconsDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  grid-template: 1fr/1fr 1fr;
}

.iconsDiv .fa-solid{
  width:30px;   
  text-align:center;
}

.iconsDiv .fa-solid:hover{
  font-size: 32px;
  color: var(--color2);
  cursor: pointer;
}

.iconsDiv .fa-solid:active{
  color: var(--color1);
}
h2:nth-child()