@media screen {
    :root {
        font-size: 1em;

        --conveyor-tiem-shadow: var(--accent-color-1);

        --conveyor-item-height: 7vw;
        --conveyor-item-width: 7vw;
        --conveyor-outer-padding: 0.5vw;
        --conveyor-inner-padding: 0.5vw;
        --conveyor-item-number: 11;

        --conveyor-height: calc(
            var(--conveyor-item-height) + var(--conveyor-outer-padding) +
                var(--conveyor-inner-padding)
        );
        --conveyor-width: calc(
            var(--conveyor-item-width) + var(--conveyor-outer-padding) +
                var(--conveyor-inner-padding)
        );

        --main-height: calc(100vh - 2 * var(--conveyor-height));
        --main-width: calc(100vw - 2 * var(--conveyor-width));

        --timeline-height: 2rem;

        --timeline-color-prev: var(--light-color);
        --timeline-color-current: var(--dark-color);
        --timeline-color-next: var(--light-color);
        --timeline-bg-current: var(--marker-color-1);

        --cursor-default: url(../img/cursor/cursor_default.png) 16 16, auto;
        --cursor-default-here: url(./img/cursor/cursor_default.png) 16 16, auto;
        --cursor-pointer: url(../img/cursor/cursor_pointer.png) 16 0, pointer;
        --cursor-pointer-here:
            url(./img/cursor/cursor_pointer.png) 16 0, pointer;
        --cursor-save: url(../img/cursor/cursor_save.png) 16 32, cell;
        --cursor-right: url(../img/cursor/cursor_right.png) 32 16, zoom-in;
        --cursor-right-here: url(./img/cursor/cursor_right.png) 32 16, zoom-in;
        --cursor-left: url(../img/cursor/cursor_left.png) 0 16, zoom-out;
        --cursor-left-here: url(./img/cursor/cursor_left.png) 0 16, zoom-out;
    }
    ::selection {
        background: var(--marker-color-1);
        color: black;
    }

    ::-moz-selection {
        background: var(--marker-color-1);
        color: black;
    }
    body.cursorLeft {
        cursor: var(--cursor-left);

        #page1 {
            cursor: var(--cursor-default);
        }
    }

    body.cursorRight {
        cursor: var(--cursor-right);

        #page11 {
            cursor: var(--cursor-default);
        }
    }

    body {
        overflow: hidden;

        background-color: var(--body-bg-color);

        height: 100%;
        width: 100%;
        cursor: var(--cursor-default);
    }

    a {
        cursor: var(--cursor-pointer);
    }

    html {
        height: 100%;
        width: 100%;
    }

    ul li {
        font-size: 1.2rem;
    }

    article {
        background-color: var(--article-bg-color);
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        font-family: var(--main-text);
        z-index: 10;
        margin: 0;
    }

    article:popover-open {
        transform: rotate3D(0, 1, 0, 90deg);
    }

    article > section {
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
        height: calc(100% - var(--timeline-height));
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 3;

        & > section {
            max-width: 45rem;
            margin: auto;
        }
    }

    .goBack,
    .goForward {
        position: absolute;
        top: 0;
        outline: none;
        border: none;
        text-align: center;
        height: var(--timeline-height);
        z-index: 40;
        margin: 0;
        padding: 0 2ch;
        font-family: var(--main-mono);
        font-size: var(--font-size-xs);
        background-color: var(--timeline-bg-color);
    }
    .goBack {
        left: 0;
        cursor: var(--cursor-left);
        background-image: url(../img/cursor/cursor_left.png);
        background-position: center;
        background-size: 35%;
        background-repeat: no-repeat;
    }

    .goForward {
        right: 0;
        cursor: var(--cursor-right);
        background-image: url(../img/cursor/cursor_right.png);
        background-position: center;
        background-size: 35%;
        background-repeat: no-repeat;
    }

    pre {
        overflow-y: auto;
        background-color: var(--accent-color-6);
        position: relative;
        background-color: white;
        padding: 0.2rem 0.4rem;
        color: var(--dark-color);
    }

    /*
    .make-space {
        text-transform: none;
        animation: make-space linear;
        animation-timeline: scroll();
    }
    @keyframes make-space {
        0% {
            opacity: 1;
        }
        8% {
            opacity: 1;
            margin-top: 1.5ch;
            margin-bottom: 1.5ch;
        }
        10% {
            margin-top: 10ch;
            margin-bottom: 10ch;
        }
        15% {
            margin-top: 8ch;
            margin-bottom: 8ch;
        }
        20% {
            margin-top: 6ch;
            margin-bottom: 6ch;
        }
        25% {
            margin-top: 3ch;
            margin-bottom: 3ch;
        }
        100% {
            opacity: 1;
            margin-bottom: 1ch;
        }
    }*/

    .questions {
        text-transform: none;
        animation: grow-it-questions linear;
        animation-timeline: scroll();
    }
    /*@keyframes grow-it-questions {
      0% {
        font-size: var(--font-size-s);
        opacity: 1;
        margin-top: 10ch;
        margin-bottom: 5ch;
      }
      50% {
        font-size: var(--font-size-m);
        opacity: 1;
        margin-bottom: 5ch;
      }
      95% {
        font-size: var(--font-size-m);
        opacity: 1;
        margin-bottom: 5ch;
      }
      100% {
        font-size: var(--font-size-s);
        opacity: 1;
        margin-bottom: 2ch;
      }
    }*/

    /***************************
    BOOKS ######################
    ***************************/

    .book {
        .authors + div {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .bookcover {
            display: grid;
            /* Erstellt zwei Spalten, die jeweils den gleichen Anteil (1fr) einnehmen */
            grid-template-columns: 1fr 1fr;
            gap: 7ch; /* Der Abstand zwischen den Bildern */
        }

        .bookcover img {
            width: auto; /* Das Bild füllt die jeweilige Grid-Zelle voll aus */
            height: auto; /* Behält das Seitenverhältnis bei */
            display: block;
            filter: drop-shadow(0 0.4ch 1ch var(--light-color));
            /*box-shadow: 0 0.4rem 1rem var(--dark-color); /*sockeloptik?, sophie fragen */
        }

        button {
            width: 50%;
            margin: 2rem 0 0 0;
            padding: 0;
            border: none;
            display: inline flex;
            justify-content: center;
            align-items: center;
            /*background-color: var(--marker-color-1);*/
            color: var(--main-text-color);
            font-size: var(--font-size-xs);
            font-family: var(--main-mono);
            border-radius: 0.5rem;
            height: 2rem;
            width: 6rem;
            border: 0.125rem solid var(--dark-color);
            box-shadow: 0 0.5rem 0 var(--dark-color);
            transition: all 0.1s ease;

            &:hover {
                background-color: var(--marker-color-1);
            }
        }

        color: var(--main-text-color);
        padding: 4rem 2rem;
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100%;
        gap: 4rem;

        & > section {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;

            ul {
                font-family: var(--main-mono);
                font-size: 1.1rem;
            }
        }

        h2,
        p,
        h3 {
            margin: 0;
        }

        img {
            max-width: 100%;
            max-height: calc(var(--main-height) - 4rem);
        }
    }

    .pdf-overlay {
        padding: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;

        button {
            width: 2rem;
            height: 16%;

            color: var(--main-text-color);
            font-size: var(--font-size-xs);
            font-family: var(--main-mono);
            border-radius: 0.5rem;
            border: 0.125rem solid var(--dark-color);
            box-shadow: 0 0.5rem 0 var(--dark-color);

            transition: all 0.1s ease;

            position: absolute;
            top: 42%;
            left: 1rem;

            &:hover {
                background-color: var(--marker-color-1);
            }
        }

        & > object {
            width: 100%;
            height: 100%;
        }
    }

    [popover].pdf-overlay {
        transition:
            opacity 0.2s,
            transform 0.2s,
            display 0.2s allow-discrete;

        opacity: 0;
        pointer-events: none;
        transform: translateY(3rem);

        &:popover-open {
            opacity: 1;
            transform: none;
            pointer-events: all;

            @starting-style {
                & {
                    opacity: 0;
                    transform: translateY(-1rem);
                }
            }
        }
    }

    h6 {
        animation: shrink-it linear;
        animation-timeline: scroll();
    }

    @keyframes shrink-it {
        0% {
            font-size: 20vh;
            opacity: 1;
        }
        5% {
            font-size: 7vh;
            opacity: 1;
        }
        100% {
            font-size: 7vh;
            opacity: 1;
        }
    }

    .booktitle {
        /* Hier passiert die Magie */
        animation: shrink-it-booktitle-main linear;
        animation-timeline: scroll(

        ); /* Bindet die Animation an den Scrollfortschritt */
    }
    @keyframes shrink-it-booktitle-main {
        0% {
            font-size: 18vh;
            opacity: 1;
            margin-bottom: 0.5ch;
        }
        5% {
            font-size: 17.5vh;
            opacity: 1;
        }
        100% {
            font-size: 17.5vh;
            opacity: 1;
            margin-bottom: 2ch;
        }
    }

    .untertitel {
        font-family: var(--main-mono);
        text-transform: uppercase;
        text-align: center;
        line-height: 1ch;
        transform: rotate(var(--almendra-angle));
        line-height: 1.75ch;
        margin-bottom: 10ch;

        color: var(--main-text-color);

        /* Hier passiert die Magie */
        animation: shrink-it-booktitle-under linear;
        animation-timeline: scroll(

        ); /* Bindet die Animation an den Scrollfortschritt */
    }
    @keyframes shrink-it-booktitle-under {
        0% {
            margin-top: 1ch;
            font-size: 5vh;
            opacity: 1;
            margin-bottom: 2ch;
        }
        5% {
            font-size: 4.75vh;
            opacity: 1;
        }
        100% {
            font-size: 4.75vh;
            opacity: 1;
            margin-bottom: 10ch;
        }
    }
}

@media screen and (min-width: 600px) {
    .book {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 2rem;

        & > section {
            grid-row: 1 / 5;
        }
    }
}

@media screen and (min-width: 1900px) {
    .book {
        & > section {
            gap: 10rem;
        }
    }
}

@media screen and (min-width: 600px) and (max-height: 600px) {
    :root {
        --conveyor-item-height: 7vh;
        --conveyor-item-width: 7vh;
    }

    h6 {
        font-size: 15vh;
    }
}