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

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

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

body{

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

    width:100vw;
    height:100vh;

    overflow:hidden;

    background:#d7ccbb;

    font-family:Georgia, serif;

}

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

#book{

    position:relative;

    width:380px;
    height:560px;

    perspective:2200px;

}

/* =====================================================
   SHEETS
===================================================== */

.sheet{

    position:absolute;

    inset:0;

    transform-origin:left center;

    transform-style:preserve-3d;

}

/* =====================================================
   SHEET ORDER
===================================================== */

#sheet-a{

    z-index:2;

}

#sheet-b{

    z-index:1;

}

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

.page{

    position:absolute;

    inset:0;

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

    overflow:hidden;

    border-radius:0 14px 14px 0;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

}

/* =====================================================
   FRONT
===================================================== */

.front{

    background:#6f5747;

    color:white;

}

/* =====================================================
   BACK
===================================================== */

.back{

    background:#faf7f2;

    color:#433b34;

    transform:rotateY(180deg);

}

/* =====================================================
   BACK CONTENT
===================================================== */

.page-back{

    position:absolute;

    inset:0;

    background:#faf7f2;

}

/* =====================================================
   TEXT
===================================================== */

h1{

    position:relative;

    z-index:2;

    font-size:42px;

    font-weight:normal;

    letter-spacing:2px;

    text-align:center;

}

/* =====================================================
   TURN
===================================================== */

.turn{

    animation:pageTurn .9s cubic-bezier(.22,.61,.36,1) forwards;

}

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

@keyframes pageTurn{

    0%{

        transform:rotateY(0deg);

    }

    100%{

        transform:rotateY(-180deg);

    }

}

.page-content{

    width:100%;
    height:100%;

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

    padding:40px;

}

.quote-page{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:24px;

    text-align:center;

}

.quote-image{

    width:180px;

    max-width:70%;

    border-radius:12px;

    object-fit:cover;

}

.quote-page blockquote{

    font-size:1.4rem;

    line-height:1.6;

    margin:0;

}

.quote-page small{

    opacity:.65;

    font-style:italic;

}

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

.cover-page{

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:48px;

}

.cover-page h1{

    font-size:2.7rem;

    font-weight:normal;

    letter-spacing:2px;

    margin-bottom:16px;

    color:white;

}

.cover-page p{

    font-size:1rem;

    letter-spacing:1px;

    opacity:.85;

    color:#efe6dc;

}

.cover-image{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:28px;

}