@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  font-family: "Google Sans Code", monospace;
}

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "aside main"
    "aside main"
    "aside footer";
  min-height: 100vh;
}

@media only screen and (max-width: 800px) {
  .page-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto; /* flexible rows */
    grid-template-areas:
      "aside"
      "main"
      "footer";
  }
}

header,
aside,
main,
footer {
  padding: 1rem 2rem;
}

aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #303030;
  color: whitesmoke;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
}

main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  background-color: #222222;
}

footer {
  grid-area: footer;
  background-color: whitesmoke;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
}

button {
  padding: 5px 15px;
  font-size: 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
  background-color: whitesmoke;
}

button:hover {
  background-color: #cacaca;
  transition: ease-in-out 0.2s;
}

.logo {
  display: flex;
  justify-content: center;
}

h2 {
  font-size: 1.4rem;
  color: whitesmoke;
}

#book-form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#book-form label {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

#book-form input {
  font-size: 1.2rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1rem;
}

.submit-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  gap: 1rem;
}

.card.active {
  padding: 1rem;
  border-radius: 4px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  position: relative;
  overflow: hidden;
  background-color: #303030;
  color: whitesmoke;
}

.card.active > * {
  position: relative;
  z-index: 1;
}

.card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style-type: none;
  font-size: 1.3rem;
}

.remove-book-container {
  display: flex;
  justify-content: flex-end;
}

.status {
  display: flex;
  gap: 1rem;
}

.change-status {
  font-size: 1rem;
  position: absolute;
  left: 190px;
  top: 105px;
}

.status-color-change {
  display: inline;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: rgb(224, 75, 6);
}

.status-color-change.yes {
  display: inline;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: rgb(224, 75, 6);
  background-color: rgb(0, 170, 99);
}

.remove-card {
  font-size: 1rem;
  padding: 4px 8px;
}

.remove-card:hover {
  background-color: rgb(255, 143, 91);
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: rgb(0, 170, 99);
}

input[type="checkbox"]:checked {
  accent-color: rgb(0, 170, 99);
}