@charset "UTF-8";

.container, .container #flipbook, .container #flipbook .page {
    padding: 0;
    margin: 0;
    position: relative
}

    .container .zoom-controls, .next-page {
        right: 1.25rem;
        position: fixed
    }

.before-page, .next-page {
    font-size: 1.5rem;
    bottom: 1.25rem;
    color: var(--font-color);
    z-index: 9999;
    cursor: pointer
}

.before-page, .container #flipbook .page .toc-page-btn button, .container .zoom-btn, .next-page {
    cursor: pointer
}

.flip-next, .flip-prev {
    backface-visibility: visible
}

body {
    min-height: 100vh
}

:root {
    --image-width: 1;
    --image-height: 1;
    --font-color: #e0e0e0;
    --background-color: #000;
    --background-color-page: #272727;
    --accent-color: #bb86fc;
    --secondary-bg: #1e1e1e;
    --border-color: #333
}

.container {
    height: calc(100vh - 6.25rem);
    width: 100vw;
    background-color: var(--background-color)
}

    .container .zoom-controls {
        top: 1.25rem;
        z-index: 10000;
        display: flex;
        gap: .5rem
    }

    .container .zoom-btn {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: rgba(0,0,0,.7);
        color: #fff;
        border: .0625rem solid #fff;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s
    }

    .container #flipbook {
        width: 100%;
        height: 100%;
        z-index: 50;
        display: flex;
        color: var(--font-color);
        justify-content: center;
        align-items: center
    }

        .container #flipbook .page {
            width: 50%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: var(--background-color-page);
            display: none
        }

            .container #flipbook .page .toc-page {
                width: 100%;
                height: 100%;
                padding: 2.5rem;
                font-size: 1rem;
                position: relative
            }

                .container #flipbook .page .toc-page h2 {
                    color: var(--font-color);
                    border-bottom: .0625rem solid var(--border-color);
                    height: 2.5rem;
                    margin-bottom: 1.25rem;
                    font-weight: 700
                }

                .container #flipbook .page .toc-page .toc-list {
                    list-style: none;
                    position: relative;
                    padding: 0;
                    margin: 0;
                    overflow: hidden;
                    height: 90%
                }

                    .container #flipbook .page .toc-page .toc-list li {
                        display: flex;
                        position: relative;
                        cursor: pointer;
                        justify-content: center;
                        align-items: center;
                        column-gap: .3125rem;
                        overflow: hidden;
                        margin-left: 1.25rem
                    }

                        .container #flipbook .page .toc-page .toc-list li .toc-title {
                            white-space: nowrap;
                            color: var(--font-color)
                        }

                        .container #flipbook .page .toc-page .toc-list li .toc-dots {
                            flex: 1;
                            height: .0625rem;
                            background-image: linear-gradient(to right,var(--border-color) 50%,transparent 50%);
                            background-size: .625rem .0625rem;
                            background-repeat: repeat-x
                        }

                        .container #flipbook .page .toc-page .toc-list li .toc-page-num {
                            text-align: right;
                            font-family: "Noto Sans SC", "SF Pro Text", "Myriad Set Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Icons", "Apple Legacy Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
                            color: var(--font-color)
                        }

                    .container #flipbook .page .toc-page .toc-list:hover {
                        animation-play-state: paused
                    }

            .container #flipbook .page .toc-page-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                column-gap: .625rem;
                margin-top: .625rem
            }

            .container #flipbook .page a {
                display: block;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center
            }

                .container #flipbook .page a img {
                    display: block
                }

            .container #flipbook .page .image-box {
                width: 100%;
                height: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden
            }

                .container #flipbook .page .image-box > div {
                    height: 100%;
                    aspect-ratio: var(--image-width)/var(--image-height)
                }

@media screen and (min-width:768px) {
    .container #flipbook .page:nth-child(odd) .image-box {
        justify-content: flex-start
    }

    .container #flipbook .page:nth-child(even) .image-box {
        justify-content: flex-end
    }

    .container #flipbook .page:nth-child(1) .image-box {
        justify-content: center
    }
}

.before-page {
    position: fixed;
    right: 2.5rem
}

@keyframes moveRight {
    from {
        left: 25%
    }

    to {
        left: 50%
    }
}

@keyframes moveCenter {
    from {
        left: 0
    }

    to {
        left: 25%
    }
}

@keyframes flipNext {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(-180deg)
    }
}

@keyframes flipPrev {
    0% {
        transform: rotateY(0)
    }

    100% {
        transform: rotateY(180deg)
    }
}

.move-right {
    animation: .5s forwards moveRight
}

.move-center {
    animation: .5s forwards moveCenter
}

.flip-next {
    animation: 1s forwards flipNext;
    transform-origin: left center
}

.flip-prev {
    animation: 1s forwards flipPrev;
    transform-origin: right center
}