body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: .8rem;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 80%;
  min-width: 400px;
}
.input-area {
  display: flex;
  flex-direction: row;
  gap: .6rem;
}
input {
  outline: none;
  width: 92%;
  padding: .9rem .6rem;
  border: none;
  background-color: rgb(190, 143, 21);
  color: aliceblue;
}
#search-input {
  background-color: whitesmoke;
  color: rgb(134, 97, 6);
  border: 1px solid rgb(134, 97, 6);
}

button {
  background-color: rgb(134, 97, 6);
  text-transform: uppercase;
  color: aliceblue;
  text-align: center;
  border: none;
  margin-top: .3rem;
  padding: .9em 1.9rem;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  background-color: rgb(82, 60, 3);
}
#delete-btn {
  background-color: whitesmoke;
  color: rgb(134, 97, 6);
  border: 1px solid rgb(134, 97, 6);
}
#delete-btn:hover {
  background-color: rgb(134, 97, 6);
  color: whitesmoke;
}
.li-btn {
  padding: .2rem .4rem;
  font-size: .5rem;
  margin-left: .3rem;
  font-weight: bold;
}
ul {
  list-style: none;
  padding-left: 0;
  margin-top: .9rem;
}
li {
  display: block;
  padding: .2rem 0;
  margin-left: 0;
}
li a {
  color: rgb(190, 143, 21);
  text-decoration: none;
}