.container,
.title-bar {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
}
.list h5,
.title-bar > *,
header .logo,
label {
  font-weight: 500;
}
button,
input {
  padding: 0.5rem;
}
.list .button,
button,
input {
  transition: var(--basic-transition);
}
.toast,
header {
  position: fixed;
}
.list .book,
.toast,
label {
  font-size: 0.75rem;
}
:root {
  --color-1: #322c2b;
  --color-2: #803d3b;
  --color-3: #af8260;
  --color-4: #e4c59e;
  --basic-border-radius: 0.25rem;
  --basic-transition: all 0.125s linear;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:not(input) {
  cursor: default;
}
body {
  background-color: var(--color-4);
}
body,
button,
input {
  font-family: Poppins, Arial, Helvetica, sans-serif;
  color: var(--color-1);
}
header {
  background-color: var(--color-1);
  display: flex;
  width: 100%;
  top: 0;
  right: 0;
}
header .logo {
  color: #fff;
}
main {
  margin-top: 3.5rem;
}
.container {
  max-width: 45rem;
  margin: auto;
}
.window {
  border: 0.1rem solid var(--color-1);
  border-radius: var(--basic-border-radius);
  overflow: hidden;
}
.title-bar {
  color: #fff;
  background-color: var(--color-2);
  border-bottom: 0.1rem solid var(--color-1);
}
.content-bar {
  padding: 1rem;
  background-color: #fff;
}
.content-bar > * {
  display: grid;
  grid-gap: 1rem;
}
.input-group,
.list .book-info {
  display: flex;
  flex-direction: column;
}
.input-group div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
button,
input {
  outline: transparent solid 0.225rem;
  border: none;
}
input {
  border: 0.1rem solid var(--color-4);
  border-radius: var(--basic-border-radius);
}
.list .book,
button {
  border-radius: var(--basic-border-radius);
  display: flex;
}
button {
  width: 100%;
  background-color: var(--color-3);
  color: #fff;
  justify-content: center;
  cursor: pointer;
}
input:focus,
input[type="checkbox"]:hover {
  outline-color: rgba(228, 196, 158, 0.5);
}
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}
.list .action-button:hover,
.list .cancel-button:hover,
button:focus,
button:hover {
  background-color: #916849;
}
button:focus {
  outline-color: rgba(175, 130, 96, 0.5);
}
#list-book table {
  border: 1px solid red;
}
.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.list,
.list .books {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.list .book {
  padding-block: 0.5rem;
  padding-inline: 1rem;
  justify-content: space-between;
  border: 0.1rem solid var(--color-4);
}
.list .button,
.toast {
  color: #fff;
  border-radius: var(--basic-border-radius);
}
.list .message {
  background-color: rgba(228, 196, 158, 0.5);
}
.list .button-wrapper {
  display: flex;
  gap: 0.125rem;
}
.list .button {
  height: 1.5rem;
  width: 1.5rem;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.list .button > span {
  font-size: 1rem;
  cursor: pointer;
}
.list .delete-button {
  background-color: var(--color-2);
  z-index: 1;
}
.list .delete-button:hover {
  background-color: #9e5451;
}
.list .action-button,
.list .cancel-button {
  background-color: var(--color-3);
}
.list .close-button,
.list .confirm-delete {
  background-color: #d25050;
}
.list .close-button:hover,
.list .confirm-delete:hover {
  background-color: #c13d3d;
}
.search-bar input {
  width: 100%;
  border-color: var(--color-1);
}
.search-bar input:focus {
  outline-color: rgba(255, 255, 255, 0.5);
}
.toast {
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(50, 44, 43, 0.75);
  padding: 0.5rem 1rem;
  opacity: 0;
  transition: opacity 0.3s, bottom 0.5s;
  z-index: 9999;
}
.toast.show {
  bottom: 1rem;
  opacity: 1;
}