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

body{

    width:100vw;
    height:100vh;
    overflow:hidden;

    font-family:Arial, Helvetica, sans-serif;
    background:#111;

}

#background-overlay{

    position:fixed;
    inset:0;

    background-image:url('background.jpg');
    background-size:cover;
    background-position:center;

    filter:blur(5px) brightness(0.4);

    z-index:-1;
}

.toolbar{

    width:100%;
    height:60px;

    background:rgba(0,0,0,0.75);

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

    padding:0 20px;

    color:white;

    backdrop-filter:blur(10px);

}

.toolbar button,
.toolbar a{

    border:none;
    padding:10px 16px;

    margin:0 5px;

    border-radius:6px;

    cursor:pointer;

    background:#ffffff22;
    color:white;

    text-decoration:none;

    transition:0.2s;
}

.toolbar button:hover,
.toolbar a:hover{

    background:#ffffff44;
}

#app{

    width:100%;
    height:calc(100vh - 60px);

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

#flipbook{

    width:1000px;
    height:700px;
}

.page{

    background:white;
    overflow:hidden;

    box-shadow:0 0 15px rgba(0,0,0,0.4);
}

.page canvas{

    width:100%;
    height:100%;
    object-fit:contain;
}