body{

    background:#f5f5f5;

}

.hero{

    text-align:center;

    padding:50px 20px 30px;

}

.hero h1{

    font-size:42px;

}

.subtitle{

    color:#777;

    margin-top:15px;

}

.toolbar{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:40px;

}

.button,
button{

    background:#a3d45d;

    color:#222;

    border:none;

    padding:14px 24px;

    border-radius:8px;

    cursor:pointer;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.button:hover,
button:hover{

    transform:translateY(-2px);

}

.flipbook-section{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:80px;

}

#flipbook{

    width:1000px;

    height:700px;

    background:white;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

    border-radius:10px;

    overflow:hidden;

    display: none;

}

.flipbook-wrapper{
    position: relative;
    max-width: 1100px;
    margin:auto;

}

#loading{
    text-align: center;
    font-family: 'akipertoFont';
    padding: 40px;
    font-size: 1.2rem;
}

.page{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page img{
    width:100%;
    height: 100%;
    object-fit: contain;
}