#main{
    width:100%;
    height: fit-content;
    overflow-x:hidden
}
#viewer{
    width:100%;
    height: auto;
    display: grid;
    margin:0 auto;  
    grid-auto-rows: 100%;
    transition: translate 1s;
}

#viewer.double{
    grid-template-columns: 50% 50%;
}

#viewer.single{
    grid-template-columns: 0 100%;
}

#viewer>div{
    overflow: hidden;
}

.book_info{
    position: absolute;
    width:40vmin;
    margin:5vmin 10vmin;
    left:50%;
    top:0;
    z-index: -1;
    transition-property: z-index;
}

.single + .book_info{
    display: none;
}

.book_info *{
    text-align: left;
}
.book_info h2{
    opacity:0.3;
    font-size:3vmin;
    line-height: 4vmin;
    top:-2vmin;
    left:5vmin;
    margin-bottom:-2vmin;
}
.book_info .explanation{
    margin:1vmin 0;
    white-space: pre-wrap;
}
.book_info .credit{
    display: flex;
    flex-flow: column;
    gap:1vmin;
    margin-top: 2vmin;
}
.book_info .credit .role{
    font-size: 1.8vmin;
    line-height: 2vmin;
    margin-left: 0;
}
.book_info .credit p{
    margin-left: 3vmin;
    font-size: 1.2vmin;
    line-height: 2vmin;
}
.book_info .credit p span{
    margin-left: 1vmin;
    font-size: 1vmin;
}
.book_info .credit p a{
    text-decoration: underline;
}

#leftPages{
    margin-left: auto;
    margin-right: 0;
}

.pages{
    max-height: 100%;
    height:fit-content;
    max-width:80%;
    width:fit-content;
}

#viewer.single .pages{
    margin:0 auto;
}

.pages div+.base{
    position: relative;
    max-height: calc(100vh - 27vmin);
}

.pages>img{
    height: 100%;
    width: auto;
    max-width: 100%;
    position: absolute;
    object-fit: contain;
    box-shadow: 0 0 5vmin black;
}
#leftPages>img{
    transform-origin: right center;
    
    right:0;
}
#rightPages>img{
    transform-origin: left center;
    left:0;
}
.target{
    position: absolute;
    z-index: 1;
    height: 100%;
    top:0;
    width:10vmin;
    opacity:0.3;
    transition: opacity 0.5s;
    text-align: center;

}
.target:hover{
	opacity:0.5;
}

.target img{
    object-fit:contain;
    height: 100%;
    width: 50%;
    margin: 0 auto;
    filter: drop-shadow(0 0 1vmin rgb(0 0 0 /0.5));
}
#rightTarget{
    right:-10vmin;
}
#leftTarget{
    left:-10vmin;
}

@keyframes pageTurn{
    0%{
        rotate: y 0deg;
    }
    100%{
        rotate: y 90deg;
    }
}

@keyframes pageSlide{
    0%{
        
        transform:translate(0);
    }
    100%{
        transform:translate(-100%);
        opacity: 0;
    }
}