:root {
/*Colors*/
    --background: #80958B;
    --bodytext: #14281D;
    
    --gray: rgba(208,208,208,.8);

    --attn: #6B79C2;
    
    --page-width: 50vh;
}

body {
    height: 100vh;
    min-height: unset;
    color: white;
    background: var(--background) url(fabric.jpg);
    background-size: 400px;
    overflow-x: scroll;
    overflow-y: hidden;
}

/*Scrollbars*/
* { scrollbar-color: var(--background) #D0D0D0; }

*::-webkit-scrollbar { width: 36px; }
*::-webkit-scrollbar-track { background: var(--background); }
*::-webkit-scrollbar-thumb { background-color: #D0D0D0; }


/*========================*/

#content {
    min-height: unset;
    background: none;
    padding: 0;
}

.book {
    margin: 10vh 0;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

h1 {
    font-size: 6rem;
    text-shadow: none;
    white-space: nowrap;
    margin-bottom: 0;
    pointer-events: none;
}

.introduction {
    padding: 0 var(--page-width);
    width: calc(var(--page-width) * 2);
    position: relative;
    z-index: 1001;
}
.introduction div {
    width: var(--page-width);
}
.introduction p:not(:first-child) {
    margin-top: 10%;
    max-width: 42ch;
}

.pages {
    display: flex;
    height: 70vh;
    flex-shrink: 0;
}
.page:not(:first-child) {
    width: var(--page-width);
    height: 100%;
    white-space: nowrap;
}

a {
    color: var(--attn);
}

a:hover {
    color: var(--background);
}