body{

    margin:0;

    overflow:hidden;

    background:#201a16;

    font-family:'Cormorant Garamond', serif;

}

/* SCREEN */

.container{

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:0;

}

/* CHARACTER */

.character{

    height:85vh;

    z-index:3;

    margin-right:-30px;

    filter:drop-shadow(0px 0px 20px rgba(0,0,0,.4));

}

/* BOOK */

.book{

    width:900px;

    height:600px;

    position:relative;

    background:#d8ccb8;

    box-shadow:

    0 0 40px rgba(0,0,0,.5);

    border-radius:4px;

    overflow:hidden;

}

/* PAGES */

.page{

    position:absolute;

    width:100%;

    height:100%;

    display:none;

    background:

    url("paper.png");

    animation:flip .9s ease;

}

.active{

    display:flex;

}

/* LEFT */

.left-page{

    width:50%;

    padding:40px;

    border-right:

    1px solid rgba(0,0,0,.15);

}

/* RIGHT */

.right-page{

    width:50%;

    padding:40px;

}

/* PHOTOS */

.left-page img{

    width:100%;

    border:12px solid white;

    transform:rotate(-2deg);

    box-shadow:

    0 0 20px rgba(0,0,0,.2);

}

/* END */

.end-page{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:70px;

}

/* SIGNATURE */

.signature{

    position:fixed;

    bottom:15px;

    right:40px;

    font-family:'Great Vibes', cursive;

    font-size:50px;

    color:#e0d5c4;

    opacity:.75;

    transform:rotate(-3deg);

}

/* BUTTONS */

.controls{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

}

button{

    padding:10px 20px;

    margin:5px;

    cursor:pointer;

    border:none;

    background:#8d7860;

    color:white;

}

/* PAGE FLIP */

@keyframes flip{

    from{

        transform:

        rotateY(-90deg);

        opacity:0;

    }

    to{

        transform:

        rotateY(0deg);

        opacity:1;

    }

}

/* VIGNETTE */

body::after{

    content:"";

    position:fixed;

    inset:0;

    box-shadow:

    inset 0 0 250px rgba(0,0,0,.6);

    pointer-events:none;

}