@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Emilys+Candy&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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


body {
    background-color:  hsl(0, 0%, 0%);
    background-image: url("./skulls.png");
    margin: 52px;

}


.main-content{
  background-color: hsl(214, 10%, 99%);
  min-height: 100vh;
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;

}


.abbr {
  font-size: 20px;
  margin-bottom: 25px;
}


.header {
  padding-bottom: 50px;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: hsl(214, 10%, 99%)
}



h1 {
  font-family: "Emilys Candy";
  font-weight: 400;
  font-size: 76px;
}


h2 {
  font-family: Inter;
  font-weight: 400;
  font-size: 20px;
  margin-top: 15px;

}


.read-badge {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}


.dnf-badge {
  background-color: transparent;
  color: hsl(0, 0%, 47%);
  border-color: hsl(0, 0%, 47%);
}

.tbr-badge {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

.choose-badge {
  background-color: transparent;
  color: hsl(0, 0%, 47%);
  border-color: hsl(0, 0%, 47%);
}


#stats {
  font-family: "Inter";
  font-size: 14px;
  font-weight: 500;
}


.reg-form, 
.filters {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}


.title,
.author,
.genre,
.lang,
.start-date,
.end-date,
.comment,
.status,
.fav,
.filter,
.sort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Inter";
  font-size: 14px;
  color: hsl(210, 10%, 23%);
  

}


.reg-form input,
.reg-form select,
.filters select {
  border: none;
  border-bottom: 1px solid hsl(0, 0%, 0%);
  background: transparent;
  outline: none;
  padding: 6px 0;
  height: 38px;
  font: inherit;

  
}


.reg-form select,
.filters select {
  width: 130px;
}



textarea {
  resize: none;
  outline: none;
  border: 1px solid hsl(0, 0%, 0%);
}



.fav {
  gap: 12px;
  display: flex;
  align-items: center;
    
}


.fav input[type="checkbox"] {
  cursor: pointer;
}


/* Checkbox animation by Andreas Storm. */

.checkbox-wrapper-12 {
    position: relative;
  }

.checkbox-wrapper-12 > svg {
    position: absolute;
    top: -130%;
    left: -170%;
    width: 110px;
    pointer-events: none;
  }

  .checkbox-wrapper-12 * {
    box-sizing: border-box;
  }

  .checkbox-wrapper-12 input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    margin: 0;
  }

  .checkbox-wrapper-12 input[type="checkbox"]:focus {
    outline: 0;
  }

  .checkbox-wrapper-12 .cbx {
    width: 24px;
    height: 24px;
    position: relative;
  }

  .checkbox-wrapper-12 .cbx input {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid hsl(240, 1%, 75%);
    border-radius: 3px;
  }

  .checkbox-wrapper-12 .cbx label {
    width: 24px;
    height: 24px;
    background: none;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: url("#goo-12");
    filter: url("#goo-12");
    transform: trasnlate3d(0, 0, 0);
    pointer-events: none;
  }

  .checkbox-wrapper-12 .cbx svg {
    position: absolute;
    top: 5px;
    left: 4px;
    z-index: 1;
    pointer-events: none;
  }

  .checkbox-wrapper-12 .cbx svg path {
    stroke: hsl(0, 0%, 100%);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
    transition: stroke-dashoffset 0.3s ease;
    transition-delay: 0.2s;
  }

  .checkbox-wrapper-12 .cbx input:checked + label {
    animation: splash-12 0.6s ease forwards;
  }

  .checkbox-wrapper-12 .cbx input:checked + label + svg path {
    stroke-dashoffset: 0;
  }

  @-moz-keyframes splash-12 {
    40% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -18px 0 -8px hsl(0, 0%, 0%), 16px -8px 0 -8px hsl(0, 0%, 0%), 16px 8px 0 -8px hsl(0, 0%, 0%), 0 18px 0 -8px hsl(0, 0%, 0%), -16px 8px 0 -8px hsl(0, 0%, 0%), -16px -8px 0 -8px hsl(0, 0%, 0%);
    }
    100% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
  @-webkit-keyframes splash-12 {
    40% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -18px 0 -8px hsl(0, 0%, 0%), 16px -8px 0 -8px hsl(0, 0%, 0%), 16px 8px 0 -8px hsl(0, 0%, 0%), 0 18px 0 -8px hsl(0, 0%, 0%), -16px 8px 0 -8px hsl(0, 0%, 0%), -16px -8px 0 -8px hsl(0, 0%, 0%);
    }
    100% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
  @-o-keyframes splash-12 {
    40% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -18px 0 -8px hsl(0, 0%, 0%), 16px -8px 0 -8px hsl(0, 0%, 0%), 16px 8px 0 -8px hsl(0, 0%, 0%), 0 18px 0 -8px hsl(0, 0%, 0%), -16px 8px 0 -8px hsl(0, 0%, 0%), -16px -8px 0 -8px hsl(0, 0%, 0%);
    }
    100% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }
  @keyframes splash-12 {
    40% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -18px 0 -8px hsl(0, 0%, 0%), 16px -8px 0 -8px hsl(0, 0%, 0%), 16px 8px 0 -8px hsl(0, 0%, 0%), 0 18px 0 -8px hsl(0, 0%, 0%), -16px 8px 0 -8px hsl(0, 0%, 0%), -16px -8px 0 -8px hsl(0, 0%, 0%);
    }
    100% {
      background: hsl(0, 0%, 0%);
      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
  }



button[type="submit"] {
  font-family: "Inter";
  cursor: pointer;
  font-weight: 600;
  padding: 15px 28px;
  background-color: hsl(0, 0%, 0%);
  color: hsl(214, 10%, 99%);
  align-self: center;
  
}

.fav-btn {
  border: none;
  border-bottom: 1px solid hsl(0, 0%, 0%);
  background: transparent;
  outline: none;
  padding: 6px 0;
}


.delete-btn {
  border: none;
  border-bottom: 1px solid hsl(0, 0%, 0%);
  background: transparent;
  outline: none;
  padding: 6px 0;
}


.fav-btn, 
.delete-btn {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .fav-btn:hover,
  .delete-btn:hover, 
  .fav-btn:focus-visible, 
  .delete-btn:focus-visible {
    transform: scale(1.1);
  }
}


button[type="submit"] {
  font-family: "Inter";
  font-weight: 500;
  padding: 15px 25px;
  margin-top: 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  box-shadow: 0 10px 15px hsla(0, 0%, 0%, 0.3);
}


@media (prefers-reduced-motion: no-preference) {
  button[type="submit"]:hover, 
  button[type="submit"]:focus-visible {
  transform: translateX(10px);
  }
}


#book-list {
  margin-top: 48px;
}


.book-card {
  display: grid;
  grid-template-columns: 70px 1.4fr 1fr 1.4fr 140px;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid hsl(0, 0%, 80%);
  border-bottom: 1px solid hsl(0, 0%, 80%);
  font-family: "Inter";
}



.book-title-column,
.book-info-column,
.book-comment-column,
.book-actions {
  border-left: 1px solid hsl(0, 0%, 80%);
  padding-left: 32px;
}


.book-favorite-column {
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.book-title-column h3 {
  font-family: "Cormorant";
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
}

.book-info-column p {
  margin-bottom: 14px;

}

.book-dates {
  white-space: nowrap;
  
}

.book-info-column p:first-child {
  font-weight: 700;
}

.book-comment-column {
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.book-comment-column::before {
  content: "“";
  font-family: "Cormorant";
  font-size: 56px;
  line-height: 0.7;
}

.book-comment-column p {
  font-family: "Cormorant";
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
}

.book-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}


.delete-btn,
.fav-btn {
  border: none;
  border-bottom: 1px solid hsl(0, 0%, 0%);
  background: transparent;
  padding: 4px 0;
  font-family: "Inter";
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}


.status-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid hsl(0, 0%, 0%);
}

.dnf-badge,
.choose-badge {
  border-color: hsl(0, 0%, 47%);
}