/*Katalog Main Page*/
.book-container .book{
    cursor: pointer;
    width: 90%;
    margin-left: -7%;
    transform: perspective(60em) rotateX(0deg) rotateZ(0deg) rotateY(-25deg);
    box-shadow: 
        1.6em 0.3em 0.9em -0.2em rgba(0,0,0,0.5), 
        0.3em 1em 1.3em rgba(0,0,0,0.3);
}

.book-container .book::before {
    content: '';
    position: absolute;
    left: 0rem;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, transparent 2%, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0.1) 4%, transparent 5%), 
        linear-gradient(to bottom, rgba(0,0,0,0.1) 5%, transparent 100%);
}

.book-container .book .book-side {
    content: '';
    position: absolute;
    left: 96%;
    top: 2px;
    background-color: #ffffff; 
    width: 15%;
    height: 99%;
    transform: perspective(60em) rotateY(60deg);
}

.book-container .book .book-side::after {
    content: '';
    position: absolute;
    background: rgb(0,0,0);
    background: 
        linear-gradient(323deg, rgba(77,76,76,1) 0%, rgba(98,97,97,1) 7%, rgba(177,175,175,1) 19%, rgba(255,255,255,1) 100%);
    width: 100%;
    height: 100%;
}

@media (max-width: 576px){
    .book-container .book{
        min-height: 150px;
    }
}

@media (min-width: 577px){
    .book-container .book{
        min-height: 150px;
    }
}

@media (min-width: 768px){
    .book-container .book{
        min-height: 250px;
    }
}

@media (min-width: 960px){
    .book-container .book{
        min-height: 170px;
    }
}
/*End of Katalog Main Page*/

/*Katalog Modal Page*/
.modal .cover-container .cover{
    cursor: pointer;
    width: 60%;
    margin-left: 15%;
    transform: perspective(60em) rotateX(0deg) rotateZ(0deg) rotateY(-25deg);
    box-shadow: 
        1.6em 0.3em 0.9em -0.2em rgba(0,0,0,0.5), 
        0.3em 1em 1.3em rgba(0,0,0,0.3);
}

.modal .cover-container .cover::before {
    content: '';
    position: absolute;
    /*top: 2rem;*/
    left: 0rem;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, transparent 2%, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0.1) 4%, transparent 5%), 
        linear-gradient(to bottom, rgba(0,0,0,0.1) 5%, transparent 100%);
}

.modal .cover-container .cover .cover-side {
    content: '';
    position: absolute;
    left: 96%;
    top: 0.1rem;
    background-color: #000; 
    width: 15%;
    height: 98.5%;
    z-index: -1;
    transform: perspective(60em) rotateY(60deg);
}

.modal .cover-container .cover .cover-side::after {
    content: '';
    position: absolute;
    background: rgb(0,0,0);
    background: 
        linear-gradient(323deg, rgba(77,76,76,1) 0%, rgba(98,97,97,1) 7%, rgba(177,175,175,1) 19%, rgba(255,255,255,1) 100%);
    width: 100%;
    height: 100%;
}
/*End of Katalog Modal Page*/

/*Detail Page*/
.book-container-detail .book{
    cursor: pointer;
    width: 70%;
    margin-left: 10%;
    transform: perspective(60em) rotateX(0deg) rotateZ(0deg) rotateY(-25deg);
    box-shadow: 
        1.6em 0.3em 0.9em -0.2em rgba(0,0,0,0.5), 
        0.3em 1em 1.3em rgba(0,0,0,0.3);
}

.book-container-detail .book::before {
    content: '';
    position: absolute;
    left: 0rem;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, transparent 2%, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0.1) 4%, transparent 5%), 
        linear-gradient(to bottom, rgba(0,0,0,0.1) 5%, transparent 100%);
}

.book-container-detail .book .book-side {
    content: '';
    position: absolute;
    left: 96%;
    top: 0.2rem;
    background-color: #dddddd; 
    width: 15%;
    height: 98.5%;
    z-index: -1;
    transform: perspective(60em) rotateY(60deg);
}

.book-container-detail .book .book-side::after {
    content: '';
    position: absolute;
    background: rgb(0,0,0);
    background: 
        linear-gradient(323deg, rgba(77,76,76,1) 0%, rgba(98,97,97,1) 7%, rgba(177,175,175,1) 19%, rgba(255,255,255,1) 100%);
    width: 100%;
    height: 100%;
}
/*End of Detail Page*/