:root {
  --bg-color: #f4f4f4;
  --text-color: #141526;
  --accent-color: #f8c470;
  --border-color: rgba(0, 0, 0, 0.1);
  --input-border-color: rgb(212, 212, 212);
}

/* Dark Mode */
.dark-mode {
  --bg-color: #141526;
  --text-color: #fff;
  --accent-color: #f8c470;
  --border-color: rgba(143, 143, 143, 0.1);
  --input-border-color: rgb(80, 80, 80);
}

button {
  cursor: pointer;
}

.add-book-form {
  background-color: var(--bg-color);
  color: var(--text-color);
  width: 90%;
  box-shadow: 0 0 10px var(--border-color);
  margin: 0 auto;
  margin-top: 2rem;
  border-radius: 10px;
  padding: 2rem;
}

#book-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group input {
  width: 80%;
  border: 1px solid var(--border-color);
  background-color: transparent;
  padding: 0.7rem 1rem;
  border-radius: 5px;
  color: var(--text-color);
}

.form-group label {
  font-weight: 200;
}

.form-group input:focus {
  outline: 1px solid var(--accent-color);
}

#book-form button {
  border: none;
  background-color: var(--accent-color);
  padding: 0.7rem 3rem;
  align-self: self-start;
  border-radius: 10px;
}