:root {
    /* --book-width: 5in;
    --book-height: 7.5in;
    --book-depth: 0.7in; */

    /* --book-width: 404px;
    --book-height: 552px;
    --book-depth: 50px; */

    --book-width: 1in;
    --book-height: 1.5in;
    --book-depth: 0.14in;

    /* --book-width: 1in;
    --book-height: 1.5in;
    --book-depth: 0.1in; */

    --book-cover-image: url(cover-1.jpg);
    --book-cover-width: calc(var(--book-width) + var(--book-width) + var(--book-depth))
  }

  @keyframes rotate {
    0%{
        transform: rotate3d(0, 0, 0, 0);
    }
    100%{
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

.book-background-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
}

.book-wrapper {
    display: flex;
    justify-content:space-around;
    align-items: center;
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: rotateZ(-5deg);
    /* box-shadow: 0px 15px 10px -15px #111;       */

}

.book {
    position: relative;
    width: var(--book-width);
    height: var(--book-height);
    transform-style: preserve-3d;
    transition: 0.7s;

    animation-name: rotate; 
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

} 

.book:after {
    content: '';
    position: absolute;
    width: var(--book-depth);
    height: 100%;
    transform-origin: left;
    background: #cecece;
    background-size: var(--book-depth) var(--book-height);
    background-position: center;
    transform: rotateY(90deg) translateZ(calc(var(--book-width) - 0.02in));

}

.book .cover {
    content: '';
    position: absolute;
    width: var(--book-width);
    height: var(--book-height);
    transform-origin: center;

    background-image: var(--book-cover-image);
    background-position: 0px 0px;
    background-size: var(--book-cover-width) var(--book-height);
    /* transform: rotateY(180deg); */

}

.book .sleeve {
    content: '';
    position: absolute;
    width: var(--book-width);
    height: var(--book-height);
    transform-origin: center;

    background-image: url('/images/upload/light-bulb.gif');
    background-position: 0px 0px;
    background-size: var(--book-cover-width) var(--book-height);
    /* transform: rotateY(180deg); */
    transform: rotateY(180deg) translateZ(-1px);

}

.book .side {
    content: '';
    position: absolute;
    width: var(--book-depth);
    height: 100%;
    transform-origin: left;
    transform: rotateY(90deg);

    background-image: var(--book-cover-image);
    background-position: calc(var(--book-width) + var(--book-depth)) 0px;
    background-size: var(--book-cover-width) var(--book-height);

}

.book .back {
    content: '';
    position: absolute;
    width: var(--book-width);
    height: var(--book-height);
    transform-origin: center;

    background-image: var(--book-cover-image);
    background-position: calc(var(--book-width)) 0px;
    background-size: var(--book-cover-width) var(--book-height);
    transform: rotateY(180deg) translateZ(var(--book-depth));

}

.book-wrapper .book:hover {
    transform: rotateY(35deg);
    /* box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2); */

}

.book-wrapper .book:active {
    transform: rotateY(180deg);
    transition: 0.7s;

}

.book-wrapper .book img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--book-width);
    height: var(--book-height);
    /* object-fit: cover; */
}

.book-background {
    display: flex;
    justify-content:space-around;
    align-items: center;

    border-radius: 50%;
    width: calc(var(--book-height) + 10px);
    height: calc(var(--book-height) + 10px); 
    background: #ffc107; 
}