/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(135deg,#1b1b1b,#0f0f0f);
}

/* ==========================================
   BODY
========================================== */

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ==========================================
   LOADER
========================================== */

#loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#111;

    z-index:99999;

    transition:.5s;
}

.loader-content{

    text-align:center;
    color:white;

}

.loader-content h1{

    font-size:42px;
    letter-spacing:8px;
    margin-bottom:15px;

}

.loader-content p{

    color:#d6d6d6;
    margin-bottom:25px;

}

.spinner{

    width:60px;
    height:60px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.15);
    border-top:5px solid #ffffff;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

/* ==========================================
   BOOK
========================================== */

#book{

    width:min(90vw,900px);
    height:min(calc(90vw * 1.414),1270px);

    max-width:900px;
    max-height:1270px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto;

    transition:.4s ease;

    filter:drop-shadow(0 18px 35px rgba(0,0,0,.45));

}

/* ==========================================
   PAGE
========================================== */

.page{

    background:#fff;
    overflow:hidden;

}

.page img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    user-select:none;
    -webkit-user-drag:none;

}

/* ==========================================
   TOOLBAR
========================================== */

#toolbar{

    position:fixed;

    left:50%;
    bottom:22px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 18px;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(12px);

    border-radius:50px;

    z-index:9999;

}

#toolbar button{

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}

#toolbar button:hover{

    transform:scale(1.08);

}

#pageNumber{

    color:white;

    min-width:80px;

    text-align:center;

    font-size:15px;

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    html,
    body{

        overflow:hidden;

    }

    #book{

        width:94vw;
        height:88vh;

        max-width:94vw;
        max-height:88vh;

        margin:auto;

    }

    #toolbar{

        bottom:10px;

        transform:translateX(-50%) scale(.85);

    }

}

/* ==========================================
   DESKTOP BESAR
========================================== */

@media (min-width:1600px){

    #book{

        max-width:1000px;
        max-height:1414px;

    }

}