:root {
     /* Neutral layers */
  --color-background: hsl(220, 15%, 10%);  /* base background */
  --color-surface:    hsl(220, 15%, 14%);  /* elevated surfaces */
  --color-card:       hsl(220, 15%, 18%);  /* card background */
  --color-border:     hsl(220, 15%, 22%);  /* subtle dividers */

  /* Text */
  --color-text-primary:   hsl(0, 0%, 96%);
  --color-text-secondary: hsl(0, 0%, 70%);
  --color-text-muted:     hsl(0, 0%, 50%);

  /* Accents */
  --color-accent-indigo:  hsl(220, 18%, 60%);
  --color-accent-cyan:    hsl(195, 20%, 50%);
  --color-accent-emerald: hsl(185, 18%, 46%);
  --color-accent-amber:   hsl(215, 12%, 45%);
  --color-accent-red: hsl(4, 51%, 41%);

  /* fonts */
  --hero-font: "ArchivoBlack";
  --body-font: "Kanit";
}

li {
  list-style: none;
}

/* app */

.app {
  background-color: var(--color-background);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;        
}

/* end */



/* header section */

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  grid-column: 1 / -1;
  height: 100px;         
  color: var(--color-text-primary);     
}

.logo {
  font-size: 2.5rem;
  font-family: var(--hero-font);
}

.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.actions__btn {
  font-family: var(--body-font);
  border: none;
  width: 7rem;
  height: 2.5rem;
  border-radius: 5px;
}

.actions__btn:hover {
  cursor: pointer;
  border: 2px solid var(--color-border);
}

/* end */



/* Body */

.body {
  padding: 5rem;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

/* end */



/* footer */

.footer {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--body-font);
  grid-column: 1 / -1;
  color: var(--color-text-primary);
  height: 3rem;
  background-color: var(--color-surface);
  gap: 1rem;
}

/* end */




/* modal */
.modal {
  display: none;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  top: 17.5%;
  left: 37.5%;
  width: 500px;
  height: 600px;
  background-color: var(--color-card);
  border: 2px solid var(--color-border);
  position: absolute;
  border-radius: 5px;
  padding: 2rem;
  font-family: var(--body-font);
  color: var(--color-text-primary)
}

.modal__header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: 1.875rem;
  border-bottom: 1px solid var(--color-border);
}

.modal__close {
  stroke: var(--color-text-muted);
}

.modal__form {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  
  padding: 1.5rem 0 1.5rem 0;
  font-size: 1rem;
}

.modal__close:hover {
  cursor: pointer;
  animation-name: trash-hover;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
}

.modal__footer {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-wrap: wrap;
}
.modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.175rem;
  font-size: 0.975rem;
  width: 200px;
}

.modal__row {
  display: flex;
  justify-content: space-between;
}

.modal__submit {
  margin-top: 2rem;
  background-color: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  border: 2px solid var(--color-border);
}

.modal__submit > button[type=submit] {
  cursor: pointer;
  border-style: none;
  background: transparent;
  color: var(--color-text-primary);
}

input,label { display: block;}

label::before {content: "*";}

input {
  padding: 10px;
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  border-radius: 10px;
  height: 2.5rem;
}

input:not(:placeholder-shown) {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* animations */
@keyframes hover-transition {
  from {background-color: var(--color-background);}
  to {background-color: var(--color-accent-amber);}
}

input#book_status:hover, .modal__submit:hover {
  cursor: pointer;
  animation: hover-transition 200ms ease-in-out;
  animation-fill-mode: forwards;
}


/* end */


/* misc */

.github {
  text-decoration: none;
  color: var(--color-text-primary);
}

.github:hover {
  cursor: pointer;
}

.card {
  color:var(--color-text-primary);
  padding: 2rem;
  height: 200px;
  width: 500px;
  background-color: var(--color-card);
  border-radius: 1rem;
  border: 2px solid var(--color-border);
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
}

.card__container {
  gap:1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
}

.card__info {
  height: auto;
  display: flex;
  justify-content: space-between;
}

.card__info--left {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 3px;
  font-family: var(--body-font);
  color: var(--color-text-secondary);
}

.card__title {
  margin-bottom: 5px;
  color: var(--color-text-primary);
  font-family: var(--hero-font);
}

.card__bookCover {
  align-self: center;
  justify-self: center;
  background-color: transparent;
  height: auto;
  width: auto;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
 }

.card__status {
  font-family: var(--body-font);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: var(--body-font);
  font-size: 1.175rem;
  border-style: none;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--color-background), var(--color-accent-amber));
}

.card__status:hover {
  cursor: pointer;
  position: relative;
  animation-name: hovering;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
}

.card__status:hover > svg {
  animation-name: rotate-svg;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
} 

.card__delete > svg {
  stroke: var(--color-text-muted);
}

.card__delete > svg:hover {
  cursor: pointer;
  animation-name: trash-hover;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
}

@keyframes hovering {
  from {
    bottom: 0px; 
    background: linear-gradient(to right, var(--color-background), var(--color-accent-amber));
  }
  to {
    bottom: 5px; 
    background: var(--color-accent-amber);
  }
}

@keyframes rotate-svg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes trash-hover {
  from {
    stroke: var(--color-text-muted);
  }
  to {
    stroke: var(--color-accent-red);
  }
}