@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant&display=swap");

:root {
  --header-color: #0c0f0a;
  --content-bg: #1c1c1c;
  --pg-font: "Cormorant Infant", serif;
  --text-color: #e5eafa;
  --green: #68edc6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

p {
  margin: 0px;
}

button {
  border: 0px;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 100px 9fr;

  font-family: var(--pg-font);
}

.header {
  grid-row: 1;
  background-color: var(--header-color);
  color: var(--text-color);
  font-size: calc(2vmin + 25px);

  display: flex;
  padding-left: 10%;
}

.title {
  align-self: center;
  justify-self: center;
}

.content {
  grid-row: 2;
  background-color: var(--content-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='90' height='90'%3E%3Cpath fill='%23d1f0b1' fill-opacity='0.2' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E");
}

.stats {
  color: var(--text-color);

  display: flex;
  justify-content: center;

  position: sticky;
  top: 0px;
}

.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2rem;

  padding: 5px 10px;
  font-size: calc(2vmin + 12px);
  background-color: #aa4465;
  border-radius: 0px 0px 10px 10px;

  position: sticky;
  top: 0px;
}

.books {
  padding-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.bookTiles {
  grid-column: 2;

  display: grid;
  grid-template: 1fr / repeat(auto-fill, minmax(15rem, 20rem));
  gap: 2rem;
  padding-bottom: 32px;
  justify-content: center;
}

.tile {
  background-color: #d5a021;
  padding: 0.5rem;
  display: flex;
  gap: 1rem;
  flex-flow: column wrap;
  align-items: center;
  border-radius: 10px;
  font-size: 1.5rem;

  overflow-x: auto;
}

.readFalse,
.delete {
  background-color: #aa4465;
  color: var(--text-color);
  padding: 0.5rem;
  font-size: 1.2rem;
  font-family: inherit;
  border-radius: 10px;
}

.readFalse:hover {
  background-color: #a5243d;
}

.readTrue {
  background-color: #d6ffb7;
  color: black;
}

.readTrue:hover {
  background-color: var(--green);
}

.delete {
  background-color: #95190c;
  width: 60%;
}

.delete:hover {
  background-color: #d1462f;
}

.addBtn {
  position: fixed;
  bottom: 3rem;
  right: 2rem;

  width: 4rem;
  height: 4rem;
  font-size: 3rem;
  border-radius: 50%;

  background-color: #d6ffb7;
}

.addBtn:hover {
  background-color: var(--green);
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

#add-Book-Form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin: 8px;
  font-size: 1.5rem;
  background-color: #aa4465;
  color: var(--text-color);
  border-radius: 15px;
}

#add-Book-Form input,
#addBookBtn {
  height: 2.5rem;
  width: 80%;
  font-family: inherit;
  font-size: inherit;
  border-radius: 8px;
  border: 0px;

  background-color: #c6d8d3;
}

#add-Book-Form input:focus {
  outline: none;
  background-color: var(--text-color);
}

#addBookBtn {
  background-color: var(--green);
}

#addBookBtn:hover {
  background-color: #d6ffb7;
}

@media (max-width: 600px) {
  .addBtn {
    bottom: 2rem;
    right: 1rem;
  }
}