@font-face {
    font-family: PixelText;
    src: url(../font/Grand9KPixel.ttf);
    /*Licensed under Creative Commons (CC-BY-SA 3.0)
    © Grand Chaos Productions.*/
}

:root {

    --pssf-hell: #F7E8DE;
    --pssf-rosa: #F6B7B0;
    --pssf-dunkel: #846564;

    font-family: 'PixelText', serif;
    font-optical-sizing: auto;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    /*background-color: #242424;*/
    background-color: var(--pssf-dunkel);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;

    /* sprite image */
    --sprite-image: url(../img/book.webp);

    /* sprite animation settings */
    /* animation duration */
    --sprite-as: .8s;
    /* animation direction */
    --sprite-ad: normal;
    /* animation fill mode */
    --sprite-af: none;
    /* animation play state */
    --sprite-ap: running;
    /* animation iteration count */
    --sprite-ai: infinite;
    /* animation timing function */
    --sprite-at: linear;
    /* animation frame rate */
    --sprite-fr: 12;
}

@layer base {

    .pssf-hell {
        color: var(--pssf-hell);
    }
    .pssf-rosa {
        color: var(--pssf-rosa);
    }
    .pssf-dunkel {
        color: var(--pssf-dunkel);
    }

    a {
        color: var(--pssf-hell);
        text-decoration: none;
    }

    a:hover {
        color: var(--pssf-rosa);
    }

    *{
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 1rem;
    }

    .sprite-wrapper {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    }

    @layer main {
    /* Frame start position */
    @property --sprite-fs {
        syntax: "<integer>";
        initial-value: 0;
        inherits: true
    }
    @property --_progress {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 0%;
    }

    .container {
        display: flex;
        flex-direction: column;
        gap: 3rem;

        /* sprite columns */
        --sprite-c: 5;
        /* sprite image height */
        --sprite-h: 3000;
        /* sprite image width */
        --sprite-w: 9600;
        /* sprite frames */
        --sprite-f: 7;
        /* animation duration based on frame rate */
        --sprite-as: calc(var(--sprite-f) / var(--sprite-fr) * 1s);

        /* frame rows */
        --sprite-r: round(up, calc(var(--sprite-f) / var(--sprite-c)), 1);
        /* frame height */
        --sprite-sh: calc(var(--sprite-h) / var(--sprite-r));
        /* frame target height, width */
        --sprite-th: calc(var(--sprite-sh) / 2);

        /* aspect ratio */
        --sprite-ar: calc(var(--sprite-th) / var(--sprite-sh));
        --sprite-uh: calc(var(--sprite-h) * var(--sprite-ar));
        --sprite-uw: calc(var(--sprite-w) * var(--sprite-ar));

        /* frame width */
        --sprite-tw: calc(var(--sprite-uw) / var(--sprite-c));

        > h1 {
            color: #d2d4e1;
            margin: 0;
            width: fit-content;
            font-weight: 500;
            font-size: 1.75rem;
            text-align: center;
            align-self: center;
        }

        p {
            margin: 0;
            text-indent: 1rem
        }

        .sub-titel {
            font-size: 0.75rem;
            margin-block-end: 0px;
        }

        .book {
        position: relative;
        display: grid;
        grid-template-areas:
                "scroll scroll scroll"
                "left markers right";
        gap: 1rem;

        .sprite {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(1px * var(--sprite-th));
            width: calc(1px * var(--sprite-tw));
            margin: calc(-1px * calc((var(--sprite-th) - (var(--sprite-th) * 0.6107)) / 2)) calc(-1px * calc((var(--sprite-tw) - (var(--sprite-tw) * 0.7042)) / 2));
            background-image: var(--sprite-image);
            transform-origin: center center;
            background-repeat: no-repeat;
            background-size: calc(1px * var(--sprite-uw)) calc(1px * var(--sprite-uh));
            z-index: -1;

            /* Frame end position */
            --sprite-fe: calc(var(--sprite-f) * (var(--slides) - 1));
            --sprite-fs-n: mod(var(--sprite-fs), var(--sprite-f));
            /* calculate the row and column position */
            --row: calc(round(down, calc(calc(var(--sprite-tw) * var(--sprite-fs-n)) / var(--sprite-uw)), 1) * var(--sprite-th));
            --col: mod(calc(var(--sprite-tw) * var(--sprite-fs-n)), var(--sprite-uw));

            background-position: calc(-1px * var(--col)) calc(-1px * var(--row));
            animation: frame var(--sprite-as) var(--sprite-at) 0s var(--sprite-ad) var(--sprite-af) var(--sprite-ap);
            animation-timeline: --carousel-timeline;
        }

        .carousel {
            counter-increment: curpage;
            grid-area: scroll;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;

            display: grid;
            margin: 0 auto;
            width: calc(1px * (var(--sprite-tw) * 0.7042));
            height: calc(1px * (var(--sprite-th) * 0.6107));
            grid: 1fr / auto-flow 100%;
            scroll-timeline: --carousel-timeline x;
            scroll-behavior: smooth;
            scrollbar-width: none;
            scroll-marker-group: after;

            &::scroll-button(*) {
            inline-size: 64px;
            aspect-ratio: 1;
            border-radius: 0;
            border: 0;
            background-color: transparent;
            cursor: pointer;
            }

            &::scroll-button(*):disabled{
            filter: invert(1);
            opacity: 0.5;
            }
            &::scroll-button(*):not(:disabled):is(:hover, :active) {
            filter: drop-shadow(2px 4px 6px black);
            }

            &::scroll-button(*):not(:disabled):active {
            scale: 90%;
            }

            &::scroll-button(left) {
            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjMyLjAwMDAwMCAyNTYuMDAwMDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdHJhbnNmb3JtPSJtYXRyaXgoLTEsMCwwLDEsMCwwKSI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwyNTYuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIiBmaWxsPSIjZmZmIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMTE4MCAyMTEwIGwwIC0xODAgLTU0MCAwIC01NDAgMCAwIC03MjUgMCAtNzI1IDU0MCAwIDU0MCAwIDAgLTE4MCAwIC0xODAgMTIwIDAgMTIwIDAgMCA2MCAwIDYwIDYwIDAgNjAgMCAwIDYwIDAgNjAgNjAgMCA2MCAwIDAgNjAgMCA2MCA2MCAwIDYwIDAgMCA2MCAwIDYwIDYwIDAgNjAgMCAwIDYwIDAgNjAgNjAgMCA2MCAwIDAgNjAgMCA2MCA2MCAwIDYwIDAgMCA1MyBjMCAyOSA1IDU4IDEyIDY1IDcgNyAzNCAxMiA2MCAxMiBsNDggMCAwIDIzNSAwIDIzNSAtNjAgMCAtNjAgMCAwIDY1IDAgNjUgLTQ3IDAgYy02OCAwIC03NSAtNyAtNzEgLTcxIGwzIC01NCA1OCAtMyA1NyAtMyAwIC0xMTkgMCAtMTIwIC01NSAwIC01NCAwIC0zIC01NyAtMyAtNTggLTYwIC01IC02MCAtNSAtMyAtNTcgLTMgLTU3IC01NyAtMyAtNTcgLTMgLTMgLTU3IC0zIC01NyAtNTcgLTMgLTU3IC0zIC0zIC01NyAtMyAtNTcgLTU3IC0zIC01NyAtMyAtMyAtNTcgLTMgLTU3IC01NyAtMyAtNTcgLTMgLTMgLTU4IC0zIC01OCAtNTcgMyAtNTcgMyAtMyAxNzggLTIgMTc3IC01NDAgMCAtNTQwIDAgMiA0ODMgMyA0ODIgNTM3IDMgNTM2IDIgNyAzMiBjNCAxNyA2IDk3IDQgMTc3IGwtNCAxNDYgNTggMyA1NyAzIDAgLTYxIDAgLTYwIDYwIDAgNjAgMCAwIC02MCAwIC02MCA2MCAwIDYwIDAgMCAtNjAgMCAtNjAgNjAgMCA2MCAwIDAgLTYwIDAgLTYwIDYwIDAgNjAgMCAwIC02MCAwIC02MCA2MCAwIDYwIDAgMCA2MCAwIDYwIC02MCAwIC02MCAwIDAgNjAgMCA2MCAtNjAgMCAtNjAgMCAwIDYwIDAgNjAgLTYwIDAgLTYwIDAgMCA2MCAwIDYwIC02MCAwIC02MCAwIDAgNjAgMCA2MCAtNjAgMCAtNjAgMCAwIDYwIDAgNjAgLTEyMCAwIC0xMjAgMCAwIC0xODB6Ij48L3BhdGg+CjwvZz4KPC9zdmc+") / "Scroll Left";
            grid-area: left;
            }

            &::scroll-button(right) {
            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjMyLjAwMDAwMCAyNTYuMDAwMDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDI1Ni4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMTgwIDIxMTAgbDAgLTE4MCAtNTQwIDAgLTU0MCAwIDAgLTcyNSAwIC03MjUgNTQwIDAgNTQwIDAgMCAtMTgwIDAgLTE4MCAxMjAgMCAxMjAgMCAwIDYwIDAgNjAgNjAgMCA2MCAwIDAgNjAgMCA2MCA2MCAwIDYwIDAgMCA2MCAwIDYwIDYwIDAgNjAgMCAwIDYwIDAgNjAgNjAgMCA2MCAwIDAgNjAgMCA2MCA2MCAwIDYwIDAgMCA2MCAwIDYwIDYwIDAgNjAgMCAwIDUzIGMwIDI5IDUgNTggMTIgNjUgNyA3IDM0IDEyIDYwIDEyIGw0OCAwIDAgMjM1IDAgMjM1IC02MCAwIC02MCAwIDAgNjUgMCA2NSAtNDcgMCBjLTY4IDAgLTc1IC03IC03MSAtNzEgbDMgLTU0IDU4IC0zIDU3IC0zIDAgLTExOSAwIC0xMjAgLTU1IDAgLTU0IDAgLTMgLTU3IC0zIC01OCAtNjAgLTUgLTYwIC01IC0zIC01NyAtMyAtNTcgLTU3IC0zIC01NyAtMyAtMyAtNTcgLTMgLTU3IC01NyAtMyAtNTcgLTMgLTMgLTU3IC0zIC01NyAtNTcgLTMgLTU3IC0zIC0zIC01NyAtMyAtNTcgLTU3IC0zIC01NyAtMyAtMyAtNTggLTMgLTU4IC01NyAzIC01NyAzIC0zIDE3OCAtMiAxNzcgLTU0MCAwIC01NDAgMCAyIDQ4MyAzIDQ4MiA1MzcgMyA1MzYgMiA3IDMyIGM0IDE3IDYgOTcgNCAxNzcgbC00IDE0NiA1OCAzIDU3IDMgMCAtNjEgMCAtNjAgNjAgMCA2MCAwIDAgLTYwIDAgLTYwIDYwIDAgNjAgMCAwIC02MCAwIC02MCA2MCAwIDYwIDAgMCAtNjAgMCAtNjAgNjAgMCA2MCAwIDAgLTYwIDAgLTYwIDYwIDAgNjAgMCAwIDYwIDAgNjAgLTYwIDAgLTYwIDAgMCA2MCAwIDYwIC02MCAwIC02MCAwIDAgNjAgMCA2MCAtNjAgMCAtNjAgMCAwIDYwIDAgNjAgLTYwIDAgLTYwIDAgMCA2MCAwIDYwIC02MCAwIC02MCAwIDAgNjAgMCA2MCAtMTIwIDAgLTEyMCAwIDAgLTE4MHoiLz4KPC9nPgo8L3N2Zz4=") / "Scroll Right";
            grid-area: right;
            justify-self: flex-end;
            }

            &::scroll-marker-group {
            content: "";
            width: 100%;
            height: 8px;
            padding: 2px 0;
            display: grid;
            position: absolute;
            grid-area: markers;

            grid-auto-flow: column;
            place-self: center;
            overflow: hidden;
            border: 1px solid #000;

            /*background: linear-gradient(90deg, #f1e2b2 0%) no-repeat left center;*/
            background: linear-gradient(90deg, #F7E8DE 0%) no-repeat left center;
            --_progress: calc(calc(100 / var(--slides)) * 1%);
            background-size: var(--_progress, 20%) 100%;

            animation: progress linear both;
            animation-timeline: --carousel-timeline;
            }

            & > .carousel-item {
            scroll-snap-stop: always;
            scroll-snap-align: start;
            animation: count-before linear forwards;
            animation-range: exit;
            counter-increment: page;
            animation-timeline: view(x);

            position: relative;
            box-sizing: border-box;
            color: #333;

            &::scroll-marker {
                content: '';
                position: relative;
                left: -1px;
                width: 100%;
                height: 100%;
                display: block;
                box-sizing: border-box;
                box-shadow: 2px 0 0 #000;
            }

            &:last-of-type{
                &::scroll-marker {
                box-shadow: none;
                }
            }

            .page-container {
                display: flex;
                gap: 3rem;
                height: 100%;

                animation: stay-centered linear both;
                animation-timeline: view(x);
                timeline-scope: --parallax-item;
            }

            .left-page, .right-page {
                flex: 1;
                font-size: small;
                overflow: hidden;
                display: grid;
                grid-template-rows: 1fr auto;

                &:after {
                bottom: 15px;
                color: hsl(45.71deg 69.23% 30%);
                }

                > div {
                text-align: justify;
                hyphens: auto;
                line-height: normal;
                display: block;
                word-wrap: break-word;
                }
            }

            .left-page {
                padding: 20px 0 20px 20px;
                &:after {
                content: counter(curpage);
                }
            }

            .right-page {
                padding: 20px 20px 20px 0;
                counter-increment: curpage;
                &:after {
                content: counter(curpage);
                place-self: self-end;
                }
            }
            }
        }
        }
    }
    }

    @media (width < 748px) {
    .container {
        --sprite-th: calc(var(--sprite-sh) / 2.5);

        > h1 {
        font-size: 1.25rem;
        }

        .page {
        > div {
            font-size: .6rem;
        }
        }
    }
    }

    @media (width < 560px) {
    .container {
        --sprite-th: calc(var(--sprite-sh) / 4);

        > h1 {
        font-size: 1rem;
        }

        .page {
        > div {
            font-size: .35rem;
        }

        &:after {
            font-size: .5rem;
        }
        }
    }
    }

    @keyframes stay-centered {
    entry 0% {
        opacity: 0;
        translate: -100%;
    }
    entry 75%  {
        opacity: 0;
        translate: -25%;
    }
    entry 100% {
        opacity: 1;
        translate: 0%;
    }
    exit 0% {
        opacity: 1;
        translate: 0%;
    }
    exit 50% {
        opacity: 0;
        translate: 50%;
    }
    exit 100% {
        opacity: 0;
        translate: 100%;
    }
    }

    @keyframes count-before {
    1%,
    100% {
        counter-increment: page curpage;
    }
    }

    @keyframes progress {
    100% {
        --_progress: 100%;
    }
    }

    @keyframes frame {
    to {
        --sprite-fs: var(--sprite-fe);
    }
    }

    @media (prefers-reduced-motion) {
    * {
        animation: none;
    }
    }