* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #594943;
    font-family: "Delius", cursive;
    font-size: 18px;
    line-height: 1.6;
}
.home-page {
    background-color: #FFDED6;
    background-image: url("image/1.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.about-page {
    background-color: #DDF6EE;
    background-image: url("image/home2.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================
   HEADER
========================= */

.header {
    width: 90%;
    max-width: 900px;

    margin: 50px auto 30px;

    text-align: center;

    padding: 35px 30px 25px;

    position: relative;
    
}


/* title */

.header h1 {
    margin: 0 0 20px;

    color: #805B51;

    font-size: 36px;
}


/* =========================
   MENU
========================= */

.image-menu {
    display: flex;

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

    gap: 25px;

    margin-top: 20px;
}

.image-menu a {
    display: block;

    transition: transform 0.2s ease;
    filter: drop-shadow(2px 3px 2px rgba(89, 73, 67, 0.15));
}
.image-menu a.active {
    transform: translateY(-5px) scale(1.08);
    filter: drop-shadow(3px 5px 3px rgba(89,73,67,0.25));
}
.image-menu img {
    width: 70px;
    height: 70px;

    object-fit: contain;
    
}


/* make menu stickers slightly different */

.menu-home {
    transform: rotate(-6deg);
}

.menu-about {
    transform: rotate(4deg);
}

.menu-diary {
    transform: rotate(-3deg);
}

.menu-photo {
    transform: rotate(5deg);
}

.menu-link {
    transform: rotate(-5deg);
}


/* hover */

.image-menu a:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.08);
}


/* =========================
   INTRO
========================= */

.intro {
    width: 90%;
    max-width: 900px;

    margin: 50px auto;

    padding: 45px;

    background: #CFF3E8;

    border: 2px solid #805B51;

    box-shadow: 5px 6px 0 #B98278;

    display: flex;

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

    gap: 50px;

    position: relative;
    transform: rotate(-1deg);
    box-shadow: 6px 7px 0 rgba(255, 218, 173, 0.5);
}


/* little paper tape */

.intro::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 25px;

    background: #FCCEC5;

    top: -13px;
    left: 50%;

    transform: translateX(-50%) rotate(-2deg);

    opacity: 0.9;
}


/* intro image */

.intro img {
    width: 180px;

    height: 180px;

    object-fit: contain;
    transform: rotate(-4deg);
}


/* intro text */

.intro h2 {
    color: #805B51;

    font-size: 30px;

     margin: 0 0 10px;
}
.intro p {
    margin: 0;
    color: #705D57;
    font-size: 16px;
}
.intro div {
    max-width: 450px;
}
#greeting {
    display: inline-block;
    margin-top: 18px;
    padding: 7px 14px;
    background: #FFF4D6;
    border: 1px dashed #C9A97E;
    color: #805B51;
    font-size: 13px;
    transform: rotate(-2deg);
}
#clock {
    margin-top: 15px;
    color: #9B766A;
    font-size: 20px;
    letter-spacing: 1px;
}
/* =========================
   MAIN CONTAINER
========================= */

.container {
    width: 90%;
    max-width: 900px;

    margin: 70px auto;
}


/* =========================
   SCRAPBOOK PAPER
========================= */

.scrapbook-paper {
    background: #FFFDF8;

    border: 1.5px solid #9B766A;

    padding: 30px;

    margin-top: 70px;
    margin-bottom: 70px;

    box-shadow: 5px 6px 0 rgba(128, 91, 81, 0.25);

    position: relative;
}

/* =========================
   PHOTO SCRAPBOOK
========================= */

.photo-card {
    width: 220px;

    background: white;

    padding: 12px 12px 20px;

    margin: 30px auto;

    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.15);

    transform: rotate(-4deg);

    position: relative;

    transition: transform 0.3s ease;
}


.photo-card img {
    width: 100%;

    display: block;

    object-fit: cover;
}


.photo-card p {
    text-align: center;

    margin: 10px 0 0;

    color: #805B51;

    font-size: 15px;
}
.photo-card::before {
    content: "";

    position: absolute;

    width: 70px;
    height: 20px;

    background: #FFC9E1;

    top: -10px;
    left: 50%;

    transform: translateX(-50%) rotate(-3deg);

    opacity: 0.85;
}
.photo-card:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.03);

    box-shadow: 7px 10px 18px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

.photo-grid {
    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 30px;

    flex-wrap: wrap;
}
.photo-card:nth-child(1) {
    transform: rotate(-4deg);
    width: 210px;
   
}

.photo-card:nth-child(2) {
    transform: rotate(3deg);
    width: 200px;
}

.photo-card:nth-child(3) {
    transform: rotate(-2deg);
    width: 190px;
}
/* =========================
   PHOTO STICKER
========================= */
.photo-sticker-image {
    position: absolute;

    width: 20px;
    height: 20px;

    object-fit: contain;

    right: -25px;
    top: 0;

    transform: rotate(8deg);

    z-index: 5;

    transition: transform 0.3s ease;
}

.photo-sticker-image:hover {
    transform: rotate(0deg) scale(1.15);
}
/* =========================
   LITTLE NOTE
========================= */

.little-note {
    background: #FFF4D6;

    width: 150px;

    padding: 10px 12px;

    position: absolute;

    bottom: -35px;
    right: -35px;

    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.12);

    transform: rotate(4deg);

    z-index: 4;

    font-size: 13px;
}

/* =========================
   PAPER CLIP
========================= */

.paperclip {
    position: absolute;

    top: 22px;
    right: 15px;

    font-size: 40px;

    transform: rotate(15deg);

    z-index: 6;
}
/* =========================
   UPDATE BOX
========================= */

.update-box {
    width: 75%;
    max-width: 650px;
    margin: 70px auto;
    padding: 30px 40px;

    background: #FFF4D6;

    border: 1.5px solid #C9A97E;

    box-shadow: 6px 7px 0 rgba(255, 218, 173, 0.5);

    text-align: left;

    transform: rotate(1deg);

    position: relative;
}

.update-box::before {
    content: "";

    position: absolute;

    width: 80px;
    height: 22px;

    background: #F5E3B5;

    top: -12px;
    left: 50%;

    transform: translateX(-50%) rotate(-3deg);

    opacity: 0.85;
}

.update-box h2 {
    color: #B98278;

    margin-top: 0;
    font-size: 25px;
}


/* =========================
   FAVOURITES
========================= */


.favourite-list {
    display: grid;
    gap: 15px;
    margin: 70px auto 70px 5%;
    grid-template-columns: repeat(2, 1fr);
}
.favourite h2 {
    color: #805B51;
    margin: 0 0 18px;
    font-size: 25px;
}

.favourite-card {
    background: #FFFDF8;

    padding: 12px 15px;

    border: 1px solid #D8B8A8;

    box-shadow: 2px 3px 0 rgba(128, 91, 81, 0.15);

    color: #705D57;

    font-size: 15px;

    transform: rotate(-1deg);

    transition: transform 0.2s ease;
}
.favourite-card:hover {
    transform: translateY(-5px) rotate(0deg);
}
.favourite-card:nth-child(2) {
    transform: rotate(2deg);
}

.favourite-card:nth-child(3) {
    transform: rotate(-2deg);
}

.favourite-card:nth-child(4) {
    transform: rotate(1deg);
}

.favourite-card:nth-child(5) {
    transform: rotate(-1.5deg);
}
.favourite-card:hover {
    transform: translateY(-5px) rotate(0deg);
}
.favourite-card::before {
    content: "";
    position: absolute;

    width: 80px;
    height: 22px;

    background: #F5E3B5;

    top: -11px;
    right: 25px;

    transform: rotate(5deg);

    opacity: 0.85;
}
.favourite::after {
    content: "♡";

    position: absolute;

    right: -25px;
    bottom: 20px;

    font-size: 55px;
    color: #B98278;

    transform: rotate(12deg);

    z-index: 5;

    transition: transform 0.3s ease;
}
.favourite:hover::after {
    transform: rotate(0deg) scale(1.15);
}
.favourite-sticker {
    position: absolute;

    width: 75px;
    height: 75px;

    object-fit: contain;

    right: -30px;
    top: 30px;

    transform: rotate(10deg);

    z-index: 5;

    transition: transform 0.3s ease;
}

.favourite-sticker:hover {
    transform: rotate(0deg) scale(1.15);
}
#favourite-message {
    margin: 25px auto 5px;
    padding: 12px 18px;
    max-width: 450px;
    background: #FFF4D6;
    border: 1px dashed #C9A97E;
    color: #805B51;
    text-align: center;
    font-size: 14px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
}
#favourite-message.show {
    opacity: 1;
    transform: translateY(0);
}
.favourite-music {
    width: 80%;
    max-width: 700px;
    margin: 80px auto;
}

.favourite-music h2 {
    margin: 0 0 25px;
    color: #805B51;
    font-size: 25px;
    text-align: center;
}
/* =========================
   PLAY MUSIC
========================= */

.music-card {
    position: relative;
    width: 75%;
    max-width: 500px;
    min-height: 170px;
    margin: 0 auto;
    padding: 30px 35px;

    background: #FFFDF8;
    border: 1.5px solid #D8B8A8;
    border-radius: 45px 25px 50px 30px;

    box-shadow: 5px 6px 0 rgba(128, 91, 81, 0.13);

    display: flex;
    align-items: center;
    gap: 25px;

    transform: rotate(-1.5deg);
}

.music-deco {
    width: 70px;
    height: 70px;

    background: #F9E1E1;
    border: 1.5px solid #D8B8A8;
    border-radius: 50%;

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

    color: #805B51;
    font-size: 32px;

    transform: rotate(-8deg);
    flex-shrink: 0;
}

.music-info {
    flex: 1;
}

.music-small {
    display: block;
    margin-bottom: 3px;

    color: #A98478;
    font-size: 11px;
}

.music-info h3 {
    margin: 0 0 5px;

    color: #805B51;
    font-size: 19px;
}

.music-info p {
    margin: 0;

    color: #705D57;
    font-size: 12px;
}

.music-play {
    width: 48px;
    height: 48px;

    border: 1.5px solid #D8B8A8;
    border-radius: 50%;

    background: #F5E3B5;
    color: #805B51;

    font-family: inherit;
    font-size: 17px;

    cursor: pointer;

    box-shadow: 2px 3px 0 rgba(128, 91, 81, 0.15);

    transition: transform 0.2s ease;
}

.music-play:hover {
    transform: scale(1.08) rotate(-5deg);
}

.music-sparkle {
    position: absolute;

    color: #B99A8F;
    font-size: 16px;
}

.sparkle-one {
    top: 18px;
    right: 25px;
    transform: rotate(10deg);
}

.sparkle-two {
    bottom: 18px;
    left: 25px;
    transform: rotate(-8deg);
}
#favourite-song {
    display: none;
}

/* =========================
   ONLINE
========================= */

.online {
    width: 65%;
    max-width: 550px;

    margin: 70px 5% 70px auto;
    padding: 25px 35px;

    background: #E8F3F8;

    border: 1.5px solid #9B766A;

    box-shadow: 6px 7px 0 rgba(255, 218, 173, 0.5);

    position: relative;

    transform: rotate(-1deg);
}

.online h2 {
    color: #805B51;
    margin: 0 0 15px;
    font-size: 25px;
}
.online p {
    margin: 7px 0;
    color: #705D57;
    font-size: 15px;
}
.online::before {
    content: "";
    position: absolute;

    width: 11px;
    height: 11px;

    background: #9BC9A8;

    border-radius: 50%;

    top: 18px;
    right: 22px;

    box-shadow: 0 0 0 4px rgba(155, 201, 168, 0.2);
}
.online::after {
    content: "";
    position: absolute;

    width: 65px;
    height: 20px;

    background: #F5E3B5;

    bottom: -10px;
    left: 25px;

    transform: rotate(-4deg);

    opacity: 0.8;
}
/* links */

a {
    color: #B98278;

    text-decoration: underline;
}

a:hover {
    color: #805B51;
}

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


.guestbook {
    width: 75%;
    max-width: 650px;
    margin: 70px 5% 70px auto;
    padding: 30px 40px;
    background: #FCE8E8;
    border: 1.5px solid #9B766A;
    box-shadow: 6px 7px 0 rgba(255, 218, 173, 0.5);
    transform: rotate(-1deg);
}

.guestbook h2 {
    margin: 0 0 20px;
    color: #805B51;
    font-size: 25px;
}

.guestbook input,
.guestbook textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #D8B8A8;
    background: #FFFDF8;
    color: #705D57;
    font-family: inherit;
    font-size: 14px;
}

.guestbook textarea {
    min-height: 90px;
    resize: vertical;
}

.guestbook button {
    padding: 9px 16px;
    border: 1px solid #9B766A;
    background: #FFF4D6;
    color: #805B51;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.guestbook button:hover {
    transform: rotate(-2deg) scale(1.05);
}

#guest-notes {
    margin-top: 25px;
}

.guest-note {
    margin-top: 12px;
    padding: 12px 15px;
    background: #FFFDF8;
    border: 1px dashed #D8B8A8;
    color: #705D57;
}

.guest-note strong {
    color: #805B51;
}
.guest-note small {
    display: block;
    margin-top: 8px;
    color: #B98278;
    font-size: 11px;
    text-align: right;
}


/* =========================
   FOOTER
========================= */

footer {
    margin-top: 100px;

    padding: 35px;

    text-align: center;

    background: #FFF4D6;

    color: #B98278;

    font-size: 14px;

    border-top: 2px dashed #B98278;
}
footer::before {
    content: "♡ ･ﾟ✧ ･ﾟ✧ ♡";

    display: block;

    margin-bottom: 10px;

    color: #B98278;

    font-size: 16px;
}
footer p {
    margin: 0 0 5px;
}

footer small {
    color: #9B766A;
    font-size: 12px;
}



.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(89, 73, 67, 0.65);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
}

.lightbox img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    background: #FFFDF8;
    padding: 10px;
    box-shadow: 8px 10px 20px rgba(0, 0, 0, 0.2);
    transform: rotate(-2deg);
}



.click-heart {
    position: absolute;
    color: #B98278;
    font-size: 22px;
    pointer-events: none;
    animation: heartFloat 1s ease-out forwards;
    z-index: 2000;
}

@keyframes heartFloat {

    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1.4);
    }

}
#theme-toggle {
    border: none;
    background: transparent;
    color: #805B51;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

#theme-toggle:hover {
    transform: rotate(20deg) scale(1.15);
}

body.dark-mode {
    background-color: #302A2A;
    color: #F7EDE7;
}

body.dark-mode .header {
    background: #403636;
    border-color: #8E7068;
    box-shadow: 6px 7px 0 #211D1D;
}

body.dark-mode .header h1 {
    color: #F3CFC5;
}

body.dark-mode .scrapbook-paper {
    background: #403636;
    border-color: #8E7068;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.25);
}

body.dark-mode .intro {
    background: #403636;
    border-color: #8E7068;
}

body.dark-mode h2 {
    color: #F3CFC5;
}

body.dark-mode p,
body.dark-mode li {
    color: #E8D9D2;
}

body.dark-mode .favourite-card {
    background: #4A3F3F;
    border-color: #8E7068;
    color: #E8D9D2;
}

body.dark-mode .online {
    background: #3B4145;
    border-color: #8E7068;
}

body.dark-mode .update-box {
    background: #484039;
    border-color: #A58B70;
}

body.dark-mode #theme-toggle {
    color: #F5D9A8;
}




/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    body {
        font-size: 16px;
    }

    .header {
        width: 92%;
        padding: 25px 15px;
    }

    .header h1 {
        font-size: 28px;
    }

    .image-menu {
        gap: 8px;
    }

    .image-menu img {
        width: 55px;
        height: 55px;
    }

    .intro {
        width: 92%;
        padding: 30px 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .intro img {
        width: 130px;
        height: 130px;
    }

    .scrapbook-paper {
        width: 90%;
        padding: 22px;
    }

    .online {
        margin-left: auto;
        margin-right: auto;
    }


    /* FAVOURITE */

    .favourite {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .online {
        width: 92%;
    }

    .favourite-list {
        grid-template-columns: 1fr;
    }

    .favourite-card {
        font-size: 14px;
    }


    /* LITTLE MEMORIES */

    .photo-grid {
        gap: 45px 20px;
    }

    .photo-card {
        width: 170px;
    }
    .guestbook {
        width: 92%;
        margin-left: auto;
        margin-right: auto;
        padding: 22px;
    }
    .guestbook input,
    .guestbook textarea {
    font-size: 14px;
}
.music-card {
    width: 95%;
    padding: 25px 20px;
    gap: 15px;
}

.music-deco {
    width: 58px;
    height: 58px;
    font-size: 27px;
}

.music-info h3 {
    font-size: 17px;
}

.music-play {
    width: 44px;
    height: 44px;
}
}

/* =========================
   ABOUT
========================= */
.about-card {
    width: 80%;
    max-width: 700px;
    margin: 80px auto;
    padding: 40px;
    
    position: relative;
}
.about-card::before {
    content: "";
    position: absolute;
    
    width: 90px;
    height: 25px;
    
    background: #F5E3B5;
    
    top: -13px;
    left: 50%;
    
    transform: translateX(-50%) rotate(-2deg);
    
    opacity: 0.9;
}
.about-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
}
.about-intro img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    display: block;

}
.about-intro img::before {
   content: "";

    position: absolute;

    width: 55px;
    height: 17px;

    background: #F5E3B5;

    top: -9px;
    left: 50%;

    transform: translateX(-50%) rotate(3deg);

    opacity: 0.85;
  }

.about-text {
    max-width: 430px;
}

.about-text h1 {
    margin: 0 0 12px;
    color: #805B51;
    font-size: 30px;
}
.about-text h1::after {
    content: " ✦";

    color: #C49A8C;
    font-size: 16px;
}
.about-text p {
    margin: 8px 0;
    color: #705D57;
    font-size: 15px;
}
.about-info {
    width: 80%;
    max-width: 700px;
    margin: 80px auto;
    padding: 35px 40px;

    background: #F9E1E1;
    border: 1.5px solid #9B766A;
    box-shadow: 5px 6px 0 rgba(128, 91, 81, 0.2);

    position: relative;
    transform: rotate(1deg);
}

.about-info h2 {
    margin: 0 0 25px;
    color: #805B51;
    font-size: 25px;
    text-align: center;
}

.about-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    justify-content: center;
    gap: 25px;
}

.info-note {
    width: 180px;
    height: 180px;
    padding: 25px;

    background: #FFFDF8;
    border: 1.5px solid #D8B8A8;
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    transform: rotate(-2deg);
}
.info-note:nth-child(2) {
    transform: rotate(3deg);
}

.info-note:nth-child(3) {
    transform: rotate(-3deg);
}

.info-note:nth-child(4) {
    transform: rotate(2deg);
}


.info-note strong {
    display: block;
    color: #805B51;
    font-size: 13px;
    margin-bottom: 4px;
}

.info-note span {
    color: #705D57;
    font-size: 14px;
}
/* =========================
   CURRENTLY LEARNING
========================= */

.learning-section {
    width: 80%;
    max-width: 700px;
    margin: 80px auto;
}

.learning-section h2 {
    margin: 0 0 25px;
    color: #805B51;
    font-size: 25px;
    text-align: center;
}

.learning-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.learning-card {
    width: 210px;
    height: 180px;
    padding: 25px;

    background: #FFFDF8;
    border: 1.5px solid #D8B8A8;

    border-radius: 48% 52% 55% 45% / 45% 48% 52% 55%;

    box-shadow: 4px 5px 0 rgba(128, 91, 81, 0.15);

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

    text-align: center;

    transform: rotate(-2deg);
}

.learning-card:nth-child(2) {
    transform: rotate(1.5deg);
    border-radius: 52% 48% 45% 55% / 50% 45% 55% 50%;
}

.learning-card:nth-child(3) {
    transform: rotate(1deg);
    border-radius: 45% 55% 50% 50% / 55% 50% 45% 50%;
}

.learning-card:nth-child(4) {
    transform: rotate(-1.5deg);
    border-radius: 50% 50% 45% 55% / 48% 55% 45% 52%;
}

.learning-icon {
    display: block;
    font-size: 30px;
    margin-bottom: 8px;
}

.learning-card h3 {
    margin: 0 0 8px;
    color: #805B51;
    font-size: 19px;
}

.learning-card p {
    margin: 0;
    color: #705D57;
    font-size: 13px;
    line-height: 1.6;
}
/* =========================
   LITTLE THINGS I'M WORKING ON
========================= */

.working-section {
    width: 80%;
    max-width: 700px;
    margin: 80px auto;
}

.working-section h2 {
    margin: 0 0 25px;
    color: #805B51;
    font-size: 25px;
    text-align: center;
}

.working-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.working-item {
    
    position: relative;

    width: 85%;
    max-width: 520px;
    min-height: 120px;

    margin: 0 auto;
    padding: 25px 30px;

    background: #FFFDF8;
    border: 1.5px solid #D8B8A8;
    border-radius: 20px 45px 25px 40px;

    box-shadow: 4px 5px 0 rgba(128, 91, 81, 0.13);

    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.working-item:nth-child(1) {
    background: #FFFDF8;
    transform: rotate(-2deg);
    border-radius: 25px 45px 20px 40px;
}

.working-item:nth-child(2) {
    background: #F9E1E1;
    transform: rotate(1.5deg);
    border-radius: 45px 20px 40px 25px;
}

.working-item:nth-child(3) {
    background: #EAF5EE;
    transform: rotate(-1deg);
    border-radius: 20px 40px 45px 25px;
}
.working-item::after {
    content: "♡";

    position: absolute;
    right: 20px;
    bottom: 12px;

    color: #B99A8F;
    font-size: 18px;

    transform: rotate(10deg);
}

.working-item:nth-child(2)::after {
    content: "✦";
}

.working-item:nth-child(3)::after {
    content: "˚₊‧";
}
.working-number {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

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

    background: #F5E3B5;
    border-radius: 50%;

    color: #805B51;
    font-size: 12px;

    transform: rotate(-6deg);
}

.working-item h3 {
    margin: 0 0 5px;
    color: #805B51;
    font-size: 18px;
}

.working-item p {
    margin: 0;
    color: #705D57;
    font-size: 14px;
    line-height: 1.6;
}
/* =========================
   ABOUT CLOSING
========================= */

.about-closing {
    width: 80%;
    max-width: 700px;
    margin: 80px auto 100px;
    text-align: center;
}

.closing-note {
    display: inline-block;
    max-width: 520px;
    padding: 30px 40px;
  
}

.closing-heart {
    display: block;
    margin-bottom: 10px;
    color: #A98478;
    font-size: 25px;
}

.closing-note p {
    margin: 0;
    color: #705D57;
    font-size: 14px;
    line-height: 1.8;
}

.closing-sign {
    display: block;
    margin-top: 15px;
    color: #805B51;
    font-size: 14px;
}
/* =========================
   ABOUT DOODLES
========================= */

.about-page {
    position: relative;
    overflow-x: hidden;
}

.about-doodle {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    color: #B99A8F;
    opacity: 0.65;
    font-size: 22px;
}

.doodle-1 {
    top: 150px;
    left: 8%;
    transform: rotate(-10deg);
}

.doodle-2 {
    top: 430px;
    right: 9%;
    transform: rotate(8deg);
    font-size: 25px;
}

.doodle-3 {
    top: 850px;
    left: 7%;
    transform: rotate(-12deg);
}

.doodle-4 {
    top: 1150px;
    right: 8%;
    transform: rotate(5deg);
    font-size: 25px;
}

.doodle-5 {
    top: 1450px;
    left: 10%;
    transform: rotate(-5deg);
    font-size: 18px;
}
/* =========================
   MOBILE
========================= */
@media (max-width:600px){
  .about-intro {
    flex-direction: column;
    text-align: center;
    gap: 15px;
}

.about-intro img {
    width: 120px;
    height: 120px;
}

.about-text {
    max-width: 100%;
}
.about-info {
    width: 92%;
    padding: 25px 20px;
}

.about-info-grid {
    grid-template-columns: repeat(2, 140px);
    gap: 18px;
}
.info-note {
    width: 140px;
    height: 140px;
    padding: 18px;
}
.learning-section {
    width: 92%;
}

.learning-grid {
    grid-template-columns: 1fr;
}

.learning-card {
    width: 190px;
    height: 165px;
    padding: 20px;
    justify-self: center;
}
.working-section {
    width: 92%;
}

.working-item {
    width: 95%;
    padding: 22px 20px;
    gap: 12px;
}

.working-number {
    width: 34px;
    height: 34px;
    font-size: 11px;
}
.about-closing {
    width: 92%;
    margin-bottom: 70px;
}

.closing-note {
    padding: 25px 22px;
}

.diary-book {
    width: 95%;

    grid-template-columns: 1fr;

    transform: rotate(0);
}


.diary-page-left,
.diary-page-right {
    min-height: auto;

    padding: 35px 25px;
}


.diary-page-left {
    border-right: none;

    border-bottom: 1px solid #D8B8A8;
}


.main-photo {
    width: 100%;
}


.main-photo img {
    height: auto;
}


.photo-cluster {
    height: 210px;
}


.photo-1 {
    width: 115px;
    height: 105px;
}


.photo-2 {
    width: 115px;
    height: 105px;
}


.photo-3 {
    width: 105px;
    height: 100px;

    left: 65px;
}


.photo-grid {
    gap: 15px;
}


.grid-photo img {
    height: 100px;
}


.bottom-photo {
    width: 95px;
    height: 90px;
}

    .diary-container {
        width: 92%;

        padding-top: 50px;
    }


    .diary-header {
        margin-bottom: 45px;
    }


    .diary-header h1 {
        font-size: 27px;
    }


    .diary-header p {
        font-size: 13px;
    }


    .diary-doodle {
        display: none;
    }
 .travel-details {
        width: 92%;
    }


  }
/* =========================
   DIARY BOOK
========================= */

.diary-book {
  
    position:relative;
    width:100%;
    max-width:700px;
    margin:70px auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    background:#FFFDF8;

    border:1.5px solid #D8B8A8;

    box-shadow:
        7px 8px 0 rgba(128,91,81,.18),
        0 15px 30px rgba(128,91,81,.08);

    transform:rotate(-1deg);

    overflow:visible;
}
.diary-book::before {
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:18px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            to right,
            rgba(128,91,81,.02),
            rgba(128,91,81,.10),
            rgba(128,91,81,.02)
        );

    border-left:1px solid rgba(128,91,81,.08);
    border-right:1px solid rgba(128,91,81,.08);

    pointer-events:none;
    z-index:5;
}
.diary-book::after {
    content:"";

    position:absolute;

    left:4px;
    right:4px;
    bottom:-5px;

    height:5px;

    background:#F4EDE5;

    border-bottom:1px solid #D8B8A8;

    box-shadow:
        2px 3px 0 rgba(128,91,81,.08);

    z-index:-1;
}
.diary-book {
    opacity:0;
    transform:translateY(25px) rotate(-1deg);
    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.22,1,.36,1);
}

.diary-book.diary-open {
    opacity:1;
    transform:translateY(0) rotate(-1deg);
}
/* =========================
   PAGES
========================= */

.diary-page-left,
.diary-page-right {
    position:relative;
    min-height:760px;
    padding:40px 30px;

    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 31px,
            rgba(216,184,168,.10) 32px
        );
}

.diary-page-left {
    border-right: 1px solid #D8B8A8;

    box-shadow:
        inset -8px 0 10px rgba(128, 91, 81, 0.05);
}


.diary-page-right {
    box-shadow:
        inset 8px 0 10px rgba(128, 91, 81, 0.04);
}


/* page border */

.diary-page-left::before,
.diary-page-right::before {
    content: "";

    position: absolute;

    top: 20px;
    bottom: 20px;
    left: 12px;
    right: 12px;

    border: 1px solid rgba(216, 184, 168, 0.22);

    pointer-events: none;
}


/* =========================
   TITLE
========================= */

.travel-number {
    display: block;

    margin-bottom: 5px;

    color: #A98478;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.travel-title {
    margin: 0;

    color: #805B51;

    font-size: 28px;

    font-weight: normal;

    transform: rotate(-2deg);
}


.travel-date {
    display: block;

    margin-top: 3px;
    margin-bottom: 22px;

    color: #B99A8F;

    font-size: 11px;
}


/* =========================
   MAIN PHOTO
========================= */

.main-photo {
    position: relative;

    width: 100%;

    margin: 0 auto 30px;

    padding: 9px 9px 24px;

    background: #FFFDF8;

    box-shadow:
        3px 5px 0 rgba(128, 91, 81, 0.15);

    transform: rotate(-3deg);

    z-index: 2;
}


.main-photo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


.photo-caption {
    display: block;

    margin-top: 7px;

    color: #A98478;

    font-size: 10px;

    text-align: center;
}


/* tape */

.photo-tape {
    position: absolute;

    width: 65px;
    height: 20px;

    top: -10px;
    left: 50%;

    background: #F5E3B5;

    transform:
        translateX(-50%)
        rotate(4deg);

    opacity: 0.85;

    z-index: 3;
}


/* =========================
   SMALL PHOTO CLUSTER
========================= */

.photo-cluster {
    position: relative;

    width: 100%;

    height: 220px;

    margin-top: 5px;
}


.small-photo {
    position: absolute;

    padding: 7px 7px 18px;

    background: #FFFDF8;

    box-shadow:
        3px 4px 0 rgba(128, 91, 81, 0.13);
}


.small-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.photo-1 {
    width: 125px;
    height: 115px;

    left: 5px;
    top: 15px;

    transform: rotate(-8deg);
}


.photo-2 {
    width: 125px;
    height: 115px;

    right: 5px;
    top: 5px;

    transform: rotate(6deg);
}


.photo-3 {
    width: 110px;
    height: 105px;

    left: 75px;
    bottom: 0;

    transform: rotate(-2deg);

    z-index: 2;
}


/* =========================
   LOCATION
========================= */

.location-note {
    display: inline-block;

    margin-top: 5px;
    margin-left: 8px;

    padding: 6px 11px;

    background: #F9E1E1;

    color: #805B51;

    font-size: 10px;

    transform: rotate(2deg);
}


/* =========================
   DECORATION
========================= */

.page-doodle {
    position: absolute;

    right: 25px;
    bottom: 25px;

    color: #B99A8F;

    font-size: 18px;

    transform: rotate(8deg);
}


/* =========================
   RIGHT PAGE — DIARY
========================= */

.diary-entry-label {
    display: block;

    margin-bottom: 10px;

    color: #A98478;

    font-size: 15px;

    transform: rotate(-2deg);
}


.diary-writing {
    padding: 5px 8px 20px;

    color: #705D57;

    font-size: 13px;

    line-height: 1.8;
}


.diary-writing p {
    margin: 0 0 12px;
}


/* =========================
   PHOTO GRID
========================= */

.photo-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin: 10px 5px 25px;
}


.grid-photo {
    padding: 6px 6px 14px;

    background: #FFFDF8;

    box-shadow:
        2px 4px 0 rgba(128, 91, 81, 0.12);
}


.grid-photo img {
    display: block;

    width: 100%;
    height: 105px;

    object-fit: cover;
}


.grid-photo-1 {
    transform: rotate(3deg);
}


.grid-photo-2 {
    transform: rotate(-4deg);
}


.grid-photo-3 {
    transform: rotate(-3deg);
}


.grid-photo-4 {
    transform: rotate(5deg);
}


/* =========================
   MEMORY NOTE
========================= */

.memory-note {
    position: relative;

    width: 90%;

    margin: 15px auto 25px;

    padding: 15px 18px;

    background: #EAF5EE;

    border: 1px solid #D8B8A8;

    transform: rotate(1.5deg);
}


.memory-note span {
    display: block;

    margin-bottom: 3px;

    color: #805B51;

    font-size: 12px;
}


.memory-note p {
    margin: 0;

    color: #705D57;

    font-size: 11px;
}


/* =========================
   BOTTOM PHOTOS
========================= */

.bottom-photos {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 15px;
}


.bottom-photo {
    width: 105px;
    height: 100px;

    padding: 6px 6px 14px;

    background: #FFFDF8;

    box-shadow:
        2px 3px 0 rgba(128, 91, 81, 0.12);
}


.bottom-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.bottom-1 {
    transform: rotate(-5deg);
}


.bottom-2 {
    transform: rotate(5deg);
}


/* =========================
   SIGNATURE
========================= */

.page-sign {
    display: block;

    margin-top: 22px;

    color: #805B51;

    font-size: 12px;

    text-align: right;

    transform: rotate(-2deg);
}
/* =========================
   DIARY PAGE
========================= */

.diary-page {
    position: relative;

    min-height: 100vh;

    background-color: #FFF7F7;

    overflow-x: hidden;
}


/* =========================
   DIARY CONTAINER
========================= */

.diary-container {
    width: 90%;
    max-width: 800px;

    margin: 0 auto;

    padding: 70px 0 100px;

    position: relative;

    z-index: 2;
}


/* =========================
   DIARY HEADER
========================= */

.diary-header {
    text-align: center;

    margin-bottom: 60px;
}


.diary-small {
    display: block;

    margin-bottom: 8px;

    color: #A98478;

    font-size: 12px;

    letter-spacing: 1px;
}


.diary-header h1 {
    margin: 0;

    color: #805B51;

    font-size: 32px;

    font-weight: normal;

    line-height: 1.3;

    transform: rotate(-1deg);
}


.diary-header p {
    margin: 12px 0 15px;

    color: #705D57;

    font-size: 14px;

    line-height: 1.7;
}


.diary-line {
    display: block;

    color: #B99A8F;

    font-size: 16px;
}


/* =========================
   DECORATIVE DOODLES
========================= */

.diary-doodle {
    position: absolute;

    z-index: 1;

    color: #B99A8F;

    opacity: 0.65;

    pointer-events: none;
}


.diary-doodle-1 {
    top: 150px;
    left: 8%;

    font-size: 22px;

    transform: rotate(-10deg);
}


.diary-doodle-2 {
    top: 380px;
    right: 8%;

    font-size: 25px;

    transform: rotate(8deg);
}


.diary-doodle-3 {
    top: 700px;
    left: 7%;

    font-size: 24px;

    transform: rotate(-5deg);
}


.diary-doodle-4 {
    top: 950px;
    right: 7%;

    font-size: 22px;

    transform: rotate(8deg);
}
/* diary closing */

.diary-closing {
    text-align: center;
    margin: 55px auto 20px;
    color: #805B51;
}

.closing-doodle {
    display: block;
    margin-bottom: 10px;
    color: #B99A8F;
    font-size: 15px;
}

.diary-closing p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    transform: rotate(-1deg);
}

.diary-closing small {
    display: block;
    margin-top: 10px;
    color: #A98478;
    font-size: 11px;
}
/* diary navigation */

.diary-navigation {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:45px auto 10px;
    font-size:11px;
    color:#A98478;
    text-align:center;
}

.diary-navigation a {
    color:#805B51;
    text-decoration:none;
    transition:all .3s ease;
}

.diary-navigation a:hover {
    transform:translateX(-4px);
    color:#B77B6D;
}

.diary-nav-heart {
    color:#B99A8F;
}

.diary-next {
    color:#A98478;
}

@media (max-width:600px) {

    .diary-navigation {
        flex-direction:column;
        gap:7px;
        margin-top:40px;
    }

    .diary-nav-heart {
        display:none;
    }
     .diary-book-page-2 {
        margin-top:60px;
    }

    .page-two-photo {
        width:94%;
    }

    .page-two-photo-grid {
        gap:12px;
    }
 .turn-page-button {
        position:relative;
        display:block;

        bottom:auto;
        right:auto;

        margin:25px auto 0;
    }
    
    
}
/* diary book page 2 */

/* =========================
   DIARY PAGE 2
   ========================= */

.diary-book-page-2 {
    margin-top:100px;
}


/* -------------------------
   LEFT : PHOTO PAGE
   ------------------------- */

.diary-photo-page {
    overflow:hidden;
}

.page-label {
    display:block;

    margin-bottom:5px;

    color:#A98478;

    font-size:10px;
    letter-spacing:1px;
    text-transform:lowercase;
}

.diary-photo-page .travel-title {
    margin-bottom:3px;
}

.diary-photo-page .travel-date {
    display:block;

    margin-bottom:25px;

    color:#A98478;
    font-size:10px;
}


/* photos */

.memory-photo {
    position:relative;

    background:#FFFDF8;

    padding:8px;

    box-shadow:
        3px 4px 0 rgba(128,91,81,.12);
}

.memory-photo img {
    display:block;

    width:100%;
    height:auto;
}


/* main photo */

.photo-main {
    width:88%;

    margin:10px auto 25px;

    transform:rotate(-1.5deg);
}


/* tape */

.photo-main .photo-tape {
    position:absolute;

    width:55px;
    height:16px;

    top:-9px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(-3deg);

    background:rgba(238,215,184,.75);

    z-index:2;
}


/* small photos */

.photo-small {
    position:absolute;

    width:42%;

    z-index:2;
}

.photo-small-1 {
    left:8%;
    bottom:95px;

    transform:rotate(-5deg);
}

.photo-small-2 {
    right:7%;
    bottom:65px;

    transform:rotate(4deg);
}


.photo-note {
    position:absolute;

    bottom:25px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(-2deg);

    color:#A98478;

    font-size:10px;

    white-space:nowrap;
}


/* -------------------------
   RIGHT : INFORMATION PAGE
   ------------------------- */

.diary-info-page {
    padding-left:35px;
    padding-right:35px;
}


.diary-entry-label {
    display:block;

    margin-bottom:8px;

    color:#A98478;

    font-size:10px;

    transform:rotate(-1deg);
}


.memory-title {
    margin:0;

    color:#805B51;

    font-size:24px;
    font-weight:normal;

    line-height:1.4;

    transform:rotate(-1deg);
}


.memory-date {
    margin-top:5px;
    margin-bottom:30px;

    color:#B99A8F;

    font-size:10px;

    letter-spacing:.5px;
}


/* sections */

.memory-section {
    margin-bottom:24px;
}


.memory-section-title {
    display:block;

    margin-bottom:5px;

    color:#805B51;

    font-size:11px;

    font-weight:bold;
}


.memory-section p {
    margin:0;

    color:#705D57;

    font-size:11px;

    line-height:1.9;
}


/* little handwritten divider */

.memory-section::after {
    content:"";

    display:block;

    width:55%;

    margin-top:15px;

    border-bottom:1px dashed #D8B8A8;
}


/* feeling section */

.feeling-section {
    margin-top:28px;
}


/* quote */

.memory-quote {
    margin-top:35px;

    text-align:center;
}


.memory-quote span {
    display:block;

    margin-bottom:8px;

    color:#B99A8F;

    font-size:13px;
}


.memory-quote p {
    margin:0;

    color:#805B51;

    font-size:11px;

    line-height:1.8;

    transform:rotate(-1deg);
}


/* page number */

.page-number {
    position:absolute;

    right:25px;
    bottom:20px;

    color:#B99A8F;

    font-size:10px;
}
@media (max-width:600px) {

    .diary-book-page-2 {
        margin-top:60px;
    }


    /* photo page */

    .diary-photo-page {
        min-height:650px;
    }

    .photo-main {
        width:86%;
    }

    .photo-small {
        width:40%;
    }

    .photo-small-1 {
        left:9%;
        bottom:95px;
    }

    .photo-small-2 {
        right:8%;
        bottom:65px;
    }


    /* info page */

    .diary-info-page {
        padding-left:25px;
        padding-right:25px;
    }

    .memory-title {
        font-size:22px;
    }

    .memory-section p {
        font-size:11px;
        line-height:1.85;
    }

    .memory-quote {
        margin-top:30px;
    }

}


.turn-page-button {
    position:absolute;
    right:28px;
    bottom:22px;

    border:none;
    background:transparent;

    color:#A98478;
    font-family:"Delius", cursive;
    font-size:11px;

    cursor:pointer;

    padding:5px 2px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.turn-page-button:hover {
    color:#805B51;
    transform:translateX(5px) rotate(-1deg);
}
.turn-page-button::before {
    content:"˚₊‧";
    margin-right:4px;
    color:#C4A79D;
} 
.page-turn {
    position:absolute;

    top:0;
    right:0;

    width:50%;
    height:100%;

    background:#FFFDF8;

    border-left:1px solid #D8B8A8;

    transform-origin:left center;
    transform:rotateY(0deg);

    opacity:0;

    z-index:10;

    pointer-events:none;

    box-shadow:
        -5px 0 10px rgba(128,91,81,.08),
        5px 0 10px rgba(128,91,81,.06);
}
.page-turn.flipping {
    animation: pageTurn .9s ease-in-out forwards;
}

@keyframes pageTurn {

    0% {
        opacity:0;
        transform:
            perspective(1200px)
            rotateY(0deg);
    }

    15% {
        opacity:1;
    }

    100% {
        opacity:1;
        transform:
            perspective(1200px)
            rotateY(-180deg);
    }

}
.page-turn::after {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            to right,
            rgba(128,91,81,.12),
            transparent 25%,
            transparent 75%,
            rgba(128,91,81,.04)
        );

    pointer-events:none;
}