.bookshelf {
  column-count: 5;
  column-gap: 0.5rem;
  margin: 3px 0;
  position: relative;
  overflow: visible;
  max-width: 90%;
}

.bookshelf .book {
  position: relative;
  display: inline-block;
  width: 110%;
  height: auto;
  margin-bottom: 0.2rem;
  overflow: hidden;
}

.bookshelf .book::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: -1;
}

@media screen and (max-width: 600px) {
  .bookshelf .book {
    width: 42vw;
    height: calc(1.53 * 42vw);
  }
}

.bookshelf .book .link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.05) 0.75%,
    rgba(255, 255, 255, 0.5) 1%,
    rgba(255, 255, 255, 0.6) 1.3%,
    rgba(255, 255, 255, 0.5) 1.4%,
    rgba(255, 255, 255, 0.3) 1.5%,
    rgba(255, 255, 255, 0.3) 2.4%,
    rgba(0, 0, 0, 0.05) 2.7%,
    rgba(0, 0, 0, 0.05) 3.5%,
    rgba(255, 255, 255, 0.3) 4%,
    rgba(255, 255, 255, 0.3) 4.5%,
    rgba(244, 244, 244, 0.1) 5.4%,
    rgba(244, 244, 244, 0.1) 99%,
    rgba(144, 144, 144, 0.2) 100%
  );
  box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 2);
}

.bookshelf .book .cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}

.bookshelf .book .cover img {
  min-width: 100%;
  min-height: 100%;
}

.divider {
  position: relative;
  height: 1px;
}

.div-transparent:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  right: 50%;
  width: 70%;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    rgb(117, 117, 117),
    transparent
  );
}

.bookolor-1 {
  background-color: #ffd8e1;
}

.bookolor-6:hover {
  background-color: #fef2f5;
}

.bookolor-2 {
  background-color: #ff89a6;
}
.bookolor-3 {
  background-color: #ff003f;
}
.bookolor-4 {
  color: #890022;
}
.bookolor-5 {
  background-color: #3b000f;
}

.bookolor-popup-1:hover {
  background-color: #3b000f;
}

.bookolor-5-border {
  border-style: solid;
  border-color: #3b000f;
}

.bookolor-5-text {
  color: #3b000f;
}

@font-face {
  font-family: "glittenRegular";
  src: url("../fonts/Glitten-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.font-logo {
  font-family: "glittenRegular", serif;
}

.text-color-logo {
  color: #890022;
}
