@font-face {
    font-family: "Arno";
    src: url('Arnopro-italicsubhead.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Arno";
    src: url('Arnopro-italicsubhead.otf');
    font-weight: normal;
    font-style: italic;
}

html,body {
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    background-color: #0e0e0e;
    overflow-y: hidden;
}
.content{
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
}
a, p, div {
    text-decoration: none;
    font-family: 'Arno', "Arno Pro", serif;
    color: #ffffff;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
::selection {
    background: yellow;
}
::-moz-selection {
    background: yellow;
}
::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}
html,body,a, p, div,.bookCursor,.indexBooks,.indexBookSpine{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.bookCursor{
    color: black;
    left: 0;top: 0;
    height: 30%;
    position: absolute;
    font-size: 40px;
    visibility: hidden;
    display: none;
}
.bookCursorMobile{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 90%;
}
.bookName {
    display: none;
}
.indexBooks{
    height: 100%;
    /*top: -20%;*/
    margin-left: 1.5vh;
    margin-left: calc(var(--vh, 1vh) * 1.5);
    width: -webkit-max-content;
    width: max-content;
    width: -moz-max-content;
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    font-size: 0;
    background-color: #000000;
}
.indexBookSpine{
    cursor: grab;
    width: auto;
    top: 0;
    height: 120vh;
    height: calc(var(--vh, 1vh) * 120);
    margin-top: -18.5vh;
    margin-top: calc(var(--vh, 1vh) * -18.5);
    /*cursor: none;*/
}
.partAfterBook{
    width: 50vh;
    width: calc(var(--vh, 1vh) * 50);
    height: 100%; top: 0;float: right;
    background-color: #000000;
}
.partAfterBook p{
    margin: 0;
    position: absolute;
    /* bottom: 20px; */
    right: 2px;
    color: #ffffff;
    font-size: 16px;
    /*line-height: 20px;*/
    /* text-align: right; */

    -webkit-touch-callout: inherit; /* iOS Safari */
    -webkit-user-select: auto; /* Safari */
    -khtml-user-select: auto; /* Konqueror HTML */
    -moz-user-select: inherit; /* Old versions of Firefox */
    -ms-user-select: auto; /* Internet Explorer/Edge */
    user-select: inherit;
}
.xoesan{
    opacity: 0;
    bottom: 0;
}
.bookHoverEffect:hover{
    transition-duration: 0.2s;
    transform: scale(1.05) translateY(-1%);
}

@media (max-aspect-ratio: 1/1) {
    .partAfterBook{
        width: calc(var(--vh, 1vh) * 30);
    }
}

@media (max-width: 400px)  and  (min-aspect-ratio: 1/1){
    .partAfterBook p{
        right: 2vw;
        font-size: 2vw;
        line-height: 2.5vw;
    }
}

@keyframes to-pho {
    from {
        left: 100vw;
    }
    to {
        left: 0;
    }
}