@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: 10;

        --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-pointer: 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);

        #page12 {
            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%;
    }

    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));
        background-color: var(--article-bg-color);
        display: flex;
        flex-direction: column;

        & > 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);
    }

    /***************************
    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);
            cursor: pointer;
            transition: all 0.1s ease;

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

    .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);

            cursor: pointer;
            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);
                }
            }
        }
    }

    /***************************
    CONVEYOR ###################
    ***************************/

    main {
        position: absolute;
        top: var(--conveyor-height);
        left: var(--conveyor-width);
        height: var(--main-height);
        width: var(--main-width);
        background-color: var(--debugging-color);

        display: none;

        iframe {
            height: 100%;
            width: 100%;
            box-shadow: 0 0.2rem 0.4rem var(--light-color); /*hebt sich stärker vom untergrund ab, sophie und felix zeigen*/
        }
    }

    nav {
        height: calc(
            100vh - var(--conveyor-height) - var(--conveyor-outer-padding) +
                var(--conveyor-inner-padding)
        );
        padding: calc(
                var(--conveyor-item-height) / 2 + var(--conveyor-outer-padding)
            )
            calc(var(--conveyor-item-width) / 2 + var(--conveyor-outer-padding));
        counter-reset: conveyor-index;
        border-radius: var(--conveyor-outer-padding);
    }

    body > input {
        display: none;

        &:checked + main {
            display: flex;
        }
    }
    /*
  #tab1:checked ~ nav label[for="tab1"],
  #tab2:checked ~ nav label[for="tab2"],
  #tab3:checked ~ nav label[for="tab3"],
  #tab4:checked ~ nav label[for="tab4"],
  #tab5:checked ~ nav label[for="tab5"],
  #tab6:checked ~ nav label[for="tab6"],
  #tab7:checked ~ nav label[for="tab7"],
  #tab8:checked ~ nav label[for="tab8"],
  #tab9:checked ~ nav label[for="tab9"],
  #tab10:checked ~ nav label[for="tab10"] {
    /* -webkit-box-shadow: 0px 0px 5ch 0px var(--conveyor-tiem-shadow);
    -moz-box-shadow: 0px 0px 5ch 0px var(--conveyor-tiem-shadow);
    box-shadow: 0px 0px 5ch 0px var(--conveyor-tiem-shadow);*/

    /*filter: drop-shadow(
      0 4px 10px var(--dark-color)
    ); /*nur test damit das mit dem dropshadow mehr zum designelement wird ist aber auch als shone besser weil es nur am objekt ist*/
    /*}*/

    .conveyor-item {
        display: block;
        height: var(--conveyor-item-height);
        width: var(--conveyor-item-width);
        offset-path: content-box;
        animation: conveyor 120s infinite linear;

        /* Calculate offset-distance using the counter */
        offset-distance: calc(
            (var(--index) / var(--conveyor-item-number)) * 100%
        );

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        filter: drop-shadow(0 0.5ch 1ch var(--light-color));

        & > span {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--text-kursive);
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--main-text-color);
            text-transform: uppercase;
            height: 100%;
            width: 100%;
            text-align: center;
        }
    }

    .conveyor-item:hover,
    #tab1:checked ~ nav label[for="tab1"],
    #tab2:checked ~ nav label[for="tab2"],
    #tab3:checked ~ nav label[for="tab3"],
    #tab4:checked ~ nav label[for="tab4"],
    #tab5:checked ~ nav label[for="tab5"],
    #tab6:checked ~ nav label[for="tab6"],
    #tab7:checked ~ nav label[for="tab7"],
    #tab8:checked ~ nav label[for="tab8"],
    #tab9:checked ~ nav label[for="tab9"],
    #tab10:checked ~ nav label[for="tab10"] {
        filter: drop-shadow(0 0.5ch 1ch var(--marker-color-1));
    }

    /* MAIN */
    .conveyor-item:nth-child(1) {
        --index: 0;
        & > span {
            transform: rotate(var(--title-angle));
            width: 200%;
            position: absolute;
            left: -50%;
        }
        /*background-image: url("../img/covers/book1.png");*/
    }

    /* MAIN */
    .conveyor-item:nth-child(2) {
        --index: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        & > span {
            background-image: url("../img/App-printer-icon.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            height: 50%;
            width: 50%;
        }
    }

    .conveyor-item:nth-child(3) {
        --index: 2;

        background-image: url("../img/covers/small/vorderseite_ask-reddit_f.png");
    }

    .conveyor-item:nth-child(4) {
        --index: 3;

        background-image: url("../img/covers/small/vorderseite_brazil_f.png");
    }

    .conveyor-item:nth-child(5) {
        --index: 4;

        background-image: url("../img/covers/small/vorderseite_collabbook_f.png");
    }

    .conveyor-item:nth-child(6) {
        --index: 5;

        background-image: url("../img/covers/small/vorderseite_grauezone_f.png");
    }

    .conveyor-item:nth-child(7) {
        --index: 6;

        background-image: url("../img/covers/small/vorderseite_informational-overload_f.png");
    }

    .conveyor-item:nth-child(8) {
        --index: 7;

        background-image: url("../img/covers/small/vorderseite_kalender_f.png");
    }

    .conveyor-item:nth-child(9) {
        --index: 8;

        background-image: url("../img/covers/small/vorderseite_rabbit-hole_f.png");
    }
    .conveyor-item:nth-child(10) {
        --index: 9;

        background-image: url("../img/covers/small/vorderseite_trinkets_f.png");
    }

    @keyframes conveyor {
        100% {
            offset-distance: calc(
                100% + ((var(--index) / var(--conveyor-item-number)) * 100%)
            );
        }
    }
}