*{

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

body{

    background:#f7f2f0;
    background-image: url("https://i.pinimg.com/1200x/3a/95/58/3a9558fcbfef0c43728174f70c6f771d.jpg");

    color:#8d7979;

    font-family:'IBM Plex Mono', monospace;

    padding:80px 30px;
}

.page{

    width:900px;

    margin:auto;

    position:relative;
}

/* NAV */

.nav{

    display:flex;

    gap:18px;

    margin-bottom:45px;
}

.nav a{

    text-decoration:none;

    color:#a28d8d;

    font-size:10px;
}

/* TITLE */

h1{

    font-family:'Cormorant Garamond', serif;

    font-size:58px;

    font-weight:300;

    color:#76495e;

    margin-bottom:10px;
}

.subtitle{

    font-size:11px;

    margin-bottom:40px;

    color:#b89d9d;
}

/* BOOK */

.book{

    display:flex;

    justify-content:center;

    background:#efe6e1;

    border:1px solid #dfd0ca;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.05);

    min-height:500px;

    position:relative;
}

.book::before{

    content:"";

    position:absolute;

    width:2px;

    height:100%;

    background:#d7c8c1;

    left:50%;
}

.book-page{

    width:50%;

    padding:50px;
}

.page-number{

    display:block;

    font-size:9px;

    letter-spacing:2px;

    color:#b79d9d;

    margin-bottom:30px;
}

/* ENTRIES */

.entry{

    margin-bottom:35px;
}

.entry strong{

    font-family:'Cormorant Garamond', serif;

    font-size:22px;

    color:#805e6f;
}

.entry p{

    font-size:11px;

    line-height:2;

    margin-top:8px;
}

/* STICKY NOTE */

.sticky-note{

    position:absolute;

    right:-30px;

    top:240px;

    width:110px;

    height:110px;

    background:#f5e0d5;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:11px;

    color:#8f7070;

    transform:rotate(6deg);

    transition:0.3s;

    cursor:pointer;

    box-shadow:
    0 8px 18px rgba(0,0,0,0.08);
}

.sticky-note:hover{

    transform:
    rotate(4deg)
    translateY(-4px);
}

/* SECRET FORM */

.hidden-form{

    position:absolute;

    right:-40px;

    top:380px;

    width:220px;

    background:#f4ece8;

    padding:18px;

    border:1px solid #dfd0ca;

    opacity:0;

    pointer-events:none;

    transition:0.4s;
}

.sticky-note:hover + .hidden-form{

    opacity:1;

    pointer-events:auto;
}

.hidden-form input,
.hidden-form textarea{

    width:100%;

    border:none;

    background:#fff;

    margin-bottom:10px;

    padding:10px;

    font-family:'IBM Plex Mono', monospace;

    font-size:10px;
}

.hidden-form textarea{

    height:90px;

    resize:none;
}

.hidden-form button{

    border:none;

    background:#d7bcbc;

    color:white;

    padding:8px 14px;

    cursor:pointer;
}

.sticky-note a{

    text-decoration:none;

    color:#8f7070;

    display:flex;

    width:100%;
    height:100%;

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

.entry{

    margin-bottom:30px;
}

.entry strong{

    display:block;

    font-family:'Cormorant Garamond', serif;

    font-size:20px;

    color:#805e6f;

    margin-bottom:2px;
}

.comment-date{

    display:block;

    font-size:8px;

    letter-spacing:1px;

    color:#b9a0a0;

    margin-bottom:10px;

    text-transform:lowercase;
}

.entry p{

    font-family:'Gaegu', cursive;

    font-size:18px;

    line-height:1;

    color:#7f6868;
}