@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

section {
  width: 100%;
  display: table;
  margin: 0;
  height: fit-content;
}


/*section:nth-child(odd){*/
/*  background-color: white;  */
/*}*/

/*section:nth-child(even){*/
/*  background-color: white;  */
/*}*/

.cover {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cover::before {
  content: '';
  position: absolute;
  bottom: -45%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0.3s;
}

.slide:hover .cover::before {
  bottom: 0;  
}


.slide {
  position: relative;
  min-width: 340px;
  width: 340px;
  height: 512px;
  background: #000;
  border-radius: 4px;
  /*border-radius: 18px;*/
  overflow: hidden;
  /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
  margin: 10px;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.details {
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #000a;
  backdrop-filter: blur(6px) saturate(130%) contrast(110%);
  transition: 0.3s;
  transition-timing-function: ease-in-out;
  z-index: 2;
  /*bottom: -110%;*/
  color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  background-image: url('https://i.sstatic.net/8Jeyb.png');
  opacity: 0;
}

.material-symbols-outlined {
  font-size: 50px !important;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 50,
  'wght' 400,
  'GRAD' 0,
  'opsz' 60;
}

.slide.slide-allbooks {
  height: 256px;
  width: 170px;
  min-width: 0px;
  overflow: visible;
}

/*.details {*/
/*  position: absolute;*/
/*  bottom: -100%;*/
/*  left: 0;*/
  /*width: 100%;*/
/*  height: auto;*/
/*  padding: 1.5em 1.5em 2em;*/
/*  background: #000a;*/
/*  backdrop-filter: blur(6px) contrast(150%) hue-rotate(15deg) saturate(115%);*/
/*  transition: 0.3s;*/
/*  transition-timing-function: ease-in-out;*/
/*  color: #fff;*/
/*  z-index: 2;*/
  
/*}*/

div.rating > span {
    font-size: 20px !important;
}

.slide:hover .details {
  /*bottom: 20%;*/
  bottom: 0;  
  opacity: 1;
}

.details h3, .tooltip h3 {
  font-weight: 700;  
}

.title {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.author {
  font-weight: 400;
  font-size: 1em;
  margin-bottom: 10px;
  opacity: 1;
}

/*.slide:hover .cover img {*/
/*  transform: scale(1.1);  */
/*}*/

.scrollable-content {
  display: flex;
  flex-direction: row;
  /*width: 70%;*/
  justify-content: center;
  /*height: auto;*/
  height: 550px;
  align-items: center;
  /*height: fit-content;*/
  /*height: 90vh;*/
}

.unscrollable-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.details .rating {
  position: relative;
  margin-bottom: 15px;
  display: flex;
  gap: .25em;
}

.tooltip .rating, .tooltip .rating-div-container, .tooltip .tags {
  padding-left: 20px;  
  padding-bottom: 10px;
}


.details .rating img, .tooltip .rating img {
  filter: invert(71%) sepia(97%) saturate(412%) hue-rotate(2deg) brightness(94%) contrast(95%);
  height: 1em;
}

.details .rating span, .tooltip .rating span, .tooltip .tags {
  margin-left: 0.25em;  
}

.details .tags, .tooltip .tags {
  display: flex;
  gap: 0.375em;
  margin-bottom: 0.875em;
  font-size: 0.85em;
  
  flex-wrap: wrap;
}
  
.details .tags span, .tooltip .tags span {
  padding: 0.35rem 0.65rem;
  color: #fff;
  border: 1.5px solid rgba(255 255 255 / 0.4);
  border-radius: 10px;
  /*border-radius: 50px;*/
  border-style: dotted;
}

#books-read-content {
  max-width: 75%;
  display: flex;
  justify-content: center;
  position: absolute;
  flex-wrap: wrap;
  
}

#favorites-content, #reading-now-content {
  max-width: 75%;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  position: absolute;
  /*flex-wrap: wrap;*/
}

.arrow {
  height: 470px;
  position: absolute;
  /*background-color: black;*/
  /*width: 15vw;*/
  padding: 15px;
  z-index: 5;
  font-weight: bolder;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: opacity 0.2s ease;
  cursor: pointer;
  
}

#favorites-left-arrow, #favorites-right-arrow, #reading-now-left-arrow, #reading-now-right-arrow {
  display: flex; 
  color: #e9ade8;
  height: fit-content;
  background: #1f2a5d;
  border-radius: 30px;
  padding: 0;
  margin: 10px;
  user-select: none;
  transition: transform 0.2s ease;
}

#favorites-left-arrow:active, #favorites-right-arrow:active, #reading-now-left-arrow:active, #reading-now-right-arrow:active {
  transform: scale(1.2);
}

.left-arrow {
  left: 0; 
  opacity: 0.5;
}

.right-arrow {
  right: 0;  
  justify-content: end;
}

.arrow:hover {
  /*opacity: 1;*/
}

body {
  width: 100vw;  
  overflow-x: hidden;
  /*background-color: #2a252d;*/
}

/*.tooltip-target {*/
/*  background: #4CAF50;*/
/*  color: white;*/
/*  padding: 15px 25px;*/
/*  border-radius: 8px;*/
/*  cursor: pointer;*/
/*  font-size: 16px;*/
/*  position: relative;*/
/*}*/
  
  
.tooltip {
  position: absolute;
  background: #241c24;
  color:#f0eef5;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
  left: 20%;
  top: -10%;
  min-height: 200px;
  width: 15vw;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  background-size: cover;
}

@media (max-width: 550px) {
  .tooltip {
    width: 200px;
    left: 5%;
  }

  #books-read-content {
    max-width: 100%;
  }

  .scrollable-content .slide, .slide.slide-allbooks {
    height: 341px;
    width: 226px;
    min-height: 341px;
    min-width: 226px;
  }

  .scrollable-content {
    height: 360px;
    min-height: 360px;
  }
}

.tooltip-show {
    opacity: 1;
}
  
  /*.tooltip::after {*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  bottom: -6px;*/
  /*  left: 50%;*/
  /*  transform: translateX(-50%);*/
  /*  border-width: 6px;*/
  /*  border-style: solid;*/
 /*   border-color: #ff6f61 transparent transparent transparent; /* fallback */
  /*}*/

  /* Animated gradient */
  /*@keyframes gradientShift {*/
  /*  0% { background-position: 0% 50%; }*/
  /*  50% { background-position: 100% 50%; }*/
  /*  100% { background-position: 0% 50%; }*/
  /*}*/