body {
  background-color: #f6faf3;
}

.header {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #3b757f;
  justify-items: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}

.title {
  grid-column: 1/-1;
  height: 100px;
  width: 75%;
  display: grid;
  align-items: center;
  justify-items: center;
  font-weight: 900;
  font-size: 30px;
  color: white;
}

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

.library {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  gap: 10px;
  width: 1200px;
  justify-content: center;
}

.card,
.newCard {
  height: 200px;
  width: 200px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
  border-radius: 5px;
  padding: 5px;
}

.card {
  background-color: #ddeff0;
}

.authorCard,
.statusReadCard,
.pagesCard {
  margin: 0;
}

.newCard {
  background-color: #bfe0e2;
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.deleteCard {
  padding: 5px;
  font-size: large;
  font-weight: bold;
  color: white;
  background-color: #b4435a;
  border: none;
  border-radius: 5%;
  width: 100%;
  margin: 5px 0px 0px 0px;
}

.changeReadStatus {
  padding: 5px;
  font-size: large;
  font-weight: bold;
  border: none;
  border-radius: 5%;
  width: 100%;
  margin: 5px 0px;
}

.read {
  color: white;
  background-color: #1c1c1c;
  border: solid 1px white;
}

.notRead {
  color: #1c1c1c;
  background-color: white;
  border: solid 1px black;
}

/*DIALOG FORM*/
#showModal {
  width: 300px;
  border: none;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}

#showModal > h2 {
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 10px;
}

label {
  display: block;
  font-size: 15px;
  font-weight: bold;
}

input[type="text"],
input[type="number"] {
  width: 100%;
}

#confirmBtn {
  padding: 5px 0px;
  font-size: large;
  font-weight: bold;
  color: white;
  background-color: #1c1c1c;
  border: none;
  border-radius: 5%;
  width: 100%;
}

/* invalid fields */
input:invalid {
  border-color: #900;
  background-color: #fdd;
}

input:focus:invalid {
  outline: none;
}

/* error message styles */
.error {
  width: 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  box-sizing: border-box;
}