* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
body {
  height: 100vh;
  background-color: black;
  color: white;
}

.books {
  padding: 1em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: min-content;
  flex: 1;
  gap: 1em;
}
.book-container {
  display: flex;
  flex-direction: column;
  background-color: oklch(20.8% 0.042 265.755);
  padding: 1em;
  border-radius: 1rem;
}
.book-name {
  font-size: 2em;
  font-weight: 800;
}
.wrapper {
  display: flex;
  height: 100%;
}
.body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.header {
  display: flex;
  padding: 0.8em;
  font-size: 2em;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
}
.links a {
  margin: 0px 0.5em;
  font-size: 0.6em;
  text-decoration-line: none;
  color: #4da6ff;
  font-weight: 600;
}
a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.new-book {
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}
button {
  background-color: #0d6efd;
  border: none;
  padding: 0.6em;
  border-radius: 1em;
  font-weight: bold;
  color: white;
  font-size: 1.4rem;
}
button:hover {
  background-color: #1a8cff;
  border: none;
}

.form-container {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.book-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.form {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: oklch(27.8% 0.03 256.848);
  padding: 2em;
  border-radius: 1em;
}

.unread {
  color: oklch(63.7% 0.237 25.331);
  font-weight: bold;
}
.read {
  color: oklch(72.3% 0.219 149.579);
  font-weight: bold;
}
.remove-button {
  background-color: oklch(57.7% 0.245 27.325);
}
.remove-button:hover {
  background-color: oklch(44.4% 0.177 26.899);
}

label {
  display: block;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 1em;
  margin: 0.5em 0;
  color: white;
  background-color: oklch(12.9% 0.042 264.695);
  border-radius: 1em;
  border: none;
}

input:valid {
  border: solid oklch(52.7% 0.154 150.069);
}
input:invalid {
  border: solid oklch(58.6% 0.253 17.585);
}