* {
  margin: 0;
  padding: 0;
}
/*
position: absolute;
    top: 15px;
    left: 15px;
    color: white;
    white-space: break-spaces;
    width: 210px;
    font-size: large;
    text-shadow: 0.2px 0.2px 0px #b3b0b0, 0.5px 0.5px 0px #b3b0b0, 0.7px 0.7px 0px #b3b0b0, 0.9px 0.9px 0px #b3b0b0, 1.1px 1.1px 0px #b3b0b0, 1.3px 1.3px 0px #b3b0b0, 1.5px 1.5px 0px #b3b0b0, 1.7px 1.7px 0px #b3b0b0;
}
*/
body {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/floor.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background: radial-gradient(circle, #3d3c3c, #000);
  perspective: 2000px;
}

.book {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transform: rotate3d(7, 2, -4, 59deg);
  position: relative;
  width: 300px;
  height: 500px;
  transition: 0.3s;
  box-shadow: -35px 35px 50px rgb(0, 0, 0);
  
}
.book.animation {
  -webkit-animation: book 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
          animation: book 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.book:hover {
  transform: rotate3d(7, 2, -4, 59deg) skewX(3deg) translate3d(20px, -20px,10px);
  box-shadow: -50px 50px 100px rgb(0, 0, 0);
}
.book div:not(.cover) {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
.book div:not(.cover, .back, .front, .right) {
  border: 2px solid #ccc;
}
.book .bottom {
  position: absolute;
  width: 300px;
  height: 500px;
  transform: rotateX(0deg) translateZ(2px);
  background-color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.book .left {
  position: absolute;
  transform: rotateY(90deg) translateX(-26px) translateZ(-25px);
  left: 0;
  height: 500px;
  width: 50px;
  background: linear-gradient(to bottom, transparent 74%, white 32%), url("../assets/bg.jpg");
  background-size: cover;
  background-position: -7px -28px;
  box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.2);
}
.book .right {
  position: absolute;
  transform: rotateY(90deg) translate(-26px, 7px) translateZ(17px);
  right: 0;
  height: 486px;
  width: 48px;
  box-shadow: inset 11px 0px 9px rgba(0, 0, 0, 0.5);
  background-image: repeating-linear-gradient(to right, #c1a17a 0.4%, #977d5e 0.6%, #c1a17a 0.7%);
}
.book .back {
  position: absolute;
  transform: rotateX(-90deg) translateY(-26px) translateZ(15px);
  bottom: 0;
  height: 48px;
  width: 293px;
  box-shadow: inset 9px 9px 9px 2px rgba(0, 0, 0, 0.5);
  background-image: repeating-linear-gradient(#c1a17a 0.4%, #977d5e 0.6%, #c1a17a 0.7%);
}
.book .front {
  position: absolute;
  transform: rotateX(90deg) translateY(26px) translateZ(15px);
  top: 0;
  height: 48px;
  width: 293px;
  box-shadow: inset 9px 9px 9px 2px rgba(0, 0, 0, 0.5);
  background-image: repeating-linear-gradient(#c1a17a 0.4%, #977d5e 0.6%, #c1a17a 0.7%);
}
.book .top {
  position: absolute;
  width: 300px;
  height: 500px;
  transform: rotateX(0deg) translateZ(50px);
  background-color: white;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.book .top h2 {
  font-size: 4em;
  line-height: 1em;
  color: white;
  position: absolute;
  left: 20px;
  bottom: 100px;
}
.book .top h2 span {
  background: url("../assets/bg.jpg");
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-size: contain;
  -webkit-text-fill-color: transparent;
}
.book .top .writer {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-weight: 400;
  font-size: 0.6em;
}
.book .top .cover {
  height: 68%;
  width: 100%;
  background: url("../assets/bg.jpg");
  background-size: cover;
}

.shadow {
  position: absolute;
  width: 300px;
  height: 500px;
  transform: rotate3d(7, 2, -4, 59deg);
  background: radial-gradient(ellipse at center, rgb(0, 0, 0), transparent);
  top: 78px;
  left: -21px;
  transform-origin: center;
  filter: blur(5px);
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}

@-webkit-keyframes book {
  50% {
    transform: rotate3d(7, 2, -4, 59deg) skewX(5deg) translate(55px, -55px);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
    box-shadow: unset;
  }
}

@keyframes book {
  50% {
    transform: rotate3d(7, 2, -4, 59deg) skewX(5deg) translate(55px, -55px);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
    box-shadow: unset;
  }
}

@media screen and (max-width:640px) {
  .book{
    scale: 0.7;
  }
}
@media screen and (max-width:400px) {
  .book{
    scale: 0.55;
  }
}
/*# sourceMappingURL=main.css.map */