body {
  background-color: palevioletred;
  font-family: sans-serif;
}
.search {
  display: flex;
  justify-content: center;
  padding: 20px 0 20px 0;
  gap: 15px;

  align-items: center;
}
#search-input {
  padding: 10px 10px;
  min-width: 120px;
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(202, 3, 70);
  border-radius: 8px;
  box-shadow: 5px 5px rgb(202, 3, 70);
}
.reset-search {
  background-color: rgb(202, 3, 70);
  box-shadow: 3px 4px rgb(212, 88, 129);
  border-radius: 100%;
  color: white;
  padding: 8px 13px;
  cursor: pointer;
}
#search-text-show {
  color: white;
}
#reco {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card {
  background-color: #fff;
  border: 3px solid black;
  border-width: 3px 6px 6px 3px;
  border-radius: 12px;
  padding: 0 12px 15px 12px;
}
.inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inline p {
  font-size: 14px;
}
.card p {
  margin: 0;
}

.show {
  padding: 5px 10px;
  background-color: orangered;
  border: none;
  cursor: pointer;
  color: white;
  border-radius: 4px;

  border: 1px solid orangered;
  background-color: white;
  color: orangered;

  border: 1px solid rgba(108, 106, 106, 0.532);
  background-color: white;
  color: darkslategray;
}

#pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.round {
  background-color: black;
  border: none;
  border-radius: 100%;
  padding: 10px 13px;
  color: white;
  text-align: center;
  cursor: pointer;
}
.footer {
  margin-top: 20%;
  font-size: small;
  color: rgb(158, 1, 54);
  text-align: center;
}