*,
body {
    margin: 0;
    padding: 0;
}

body {
    zoom: 1;
    overflow: hidden;
    background: #141e30;
    background: -webkit-linear-gradient(to bottom, #243b55, #141e30);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#book {
    --page-ratio: calc(11 / 8.5);
    --book-ratio: calc(11 / 17);
    --book-width: min(100vw, calc(100vh / var(--page-ratio) * 2));
    --book-height: calc(var(--book-width) * var(--page-ratio) / 2);

    width: var(--book-width);
    height: var(--book-height);
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (orientation: portrait) {
    #book {
        --book-width: 100vw;
        --book-height: calc(var(--book-width) * var(--page-ratio) / 2);
    }
}

.nav-buttons {
    position: absolute;
    z-index: 100;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.nav-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: 800;
    border: none;
    padding: 20px 15px;
    cursor: pointer;
    pointer-events: all;
}

#fullscreen-button {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 8px;
    background-color: #c9c9c9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#fullscreen-button:hover {
    background-color: #ababab;
}

.fullscreen-img {
    height: 15px;
}

#autoFlipBtn {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    z-index: 100;
}

#autoFlipBtn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.page1 {
    background: url(images/synapse/1.jpg);
    background-size: 100% 100%;
}

.page2 {
    background: url(images/synapse/2.jpg);
    background-size: 100% 100%;
}

.page3 {
    background: url(images/synapse/3.jpg);
    background-size: 100% 100%;
}

.page4 {
    background: url(images/synapse/4.jpg);
    background-size: 100% 100%;
}

.page5 {
    background: url(images/synapse/5.jpg);
    background-size: 100% 100%;
}

.page6 {
    background: url(images/synapse/6.jpg);
    background-size: 100% 100%;
}

.page7 {
    background: url(images/synapse/7.jpg);
    background-size: 100% 100%;
}

.page8 {
    background: url(images/synapse/8.jpg);
    background-size: 100% 100%;
}

.page9 {
    background: url(images/synapse/9.jpg);
    background-size: 100% 100%;
}

.page10 {
    background: url(images/synapse/10.jpg);
    background-size: 100% 100%;
}

.page11 {
    background: url(images/synapse/11.jpg);
    background-size: 100% 100%;
}

.page12 {
    background: url(images/synapse/12.jpg);
    background-size: 100% 100%;
}

.page13 {
    background: url(images/synapse/13.jpg);
    background-size: 100% 100%;
}

.page14 {
    background: url(images/synapse/14.jpg);
    background-size: 100% 100%;
}

.page15 {
    background: url(images/synapse/15.jpg);
    background-size: 100% 100%;
}

.page16 {
    background: url(images/synapse/16.jpg);
    background-size: 100% 100%;
}

.page17 {
    background: url(images/synapse/17.jpg);
    background-size: 100% 100%;
}

.page18 {
    background: url(images/synapse/18.jpg);
    background-size: 100% 100%;
}

.page19 {
    background: url(images/synapse/19.jpg);
    background-size: 100% 100%;
}

.page20 {
    background: url(images/synapse/20.jpg);
    background-size: 100% 100%;
}

.page21 {
    background: url(images/synapse/21.jpg);
    background-size: 100% 100%;
}

.page22 {
    background: url(images/synapse/22.jpg);
    background-size: 100% 100%;
}

.page23 {
    background: url(images/synapse/23.jpg);
    background-size: 100% 100%;
}

.page24 {
    background: url(images/synapse/24.jpg);
    background-size: 100% 100%;
}

.page25 {
    background: url(images/synapse/25.jpg);
    background-size: 100% 100%;
}

.page26 {
    background: url(images/synapse/26.jpg);
    background-size: 100% 100%;
}

.page27 {
    background: url(images/synapse/27.jpg);
    background-size: 100% 100%;
}

.page28 {
    background: url(images/synapse/28.jpg);
    background-size: 100% 100%;
}

.page29 {
    background: url(images/synapse/29.jpg);
    background-size: 100% 100%;
}

.page30 {
    background: url(images/synapse/30.jpg);
    background-size: 100% 100%;
}

.page31 {
    background: url(images/synapse/31.jpg);
    background-size: 100% 100%;
}

.page32 {
    background: url(images/synapse/32.jpg);
    background-size: 100% 100%;
}

.page33 {
    background: url(images/synapse/33.jpg);
    background-size: 100% 100%;
}

.page34 {
    background: url(images/synapse/34.jpg);
    background-size: 100% 100%;
}

.page35 {
    background: url(images/synapse/35.jpg);
    background-size: 100% 100%;
}

.page36 {
    background: url(images/synapse/36.jpg);
    background-size: 100% 100%;
}

.page37 {
    background: url(images/synapse/37.jpg);
    background-size: 100% 100%;
}

.page38 {
    background: url(images/synapse/38.jpg);
    background-size: 100% 100%;
}

.page39 {
    background: url(images/synapse/39.jpg);
    background-size: 100% 100%;
}

.page40 {
    background: url(images/synapse/40.jpg);
    background-size: 100% 100%;
}

.page41 {
    background: url(images/synapse/41.jpg);
    background-size: 100% 100%;
}

.page42 {
    background: url(images/synapse/42.jpg);
    background-size: 100% 100%;
}

.page43 {
    background: url(images/synapse/43.jpg);
    background-size: 100% 100%;
}

.page44 {
    background: url(images/synapse/44.jpg);
    background-size: 100% 100%;
}

.page45 {
    background: url(images/synapse/45.jpg);
    background-size: 100% 100%;
}

.page46 {
    background: url(images/synapse/46.jpg);
    background-size: 100% 100%;
}

.page47 {
    background: url(images/synapse/47.jpg);
    background-size: 100% 100%;
}

.page48 {
    background: url(images/synapse/48.jpg);
    background-size: 100% 100%;
}

.page49 {
    background: url(images/synapse/49.jpg);
    background-size: 100% 100%;
}

.page50 {
    background: url(images/synapse/50.jpg);
    background-size: 100% 100%;
}

.page51 {
    background: url(images/synapse/51.jpg);
    background-size: 100% 100%;
}

.page52 {
    background: url(images/synapse/52.jpg);
    background-size: 100% 100%;
}