/* =====================================================
   FAWNDIARIES ♡ MASTER STYLESHEET
===================================================== */

:root {

    --cream: #fffafc;

    --paper: #ffffff;

    --blush: #f8dfe9;

    --pink: #d49ab2;

    --deep-pink: #a96180;

    --text: #705764;

    --muted: #a17f8d;

    --line: #ead0dc;

    --soft: #fff3f7;

    --sea: #dff2f3;

    --sea-deep: #7faeb2;

    --yellow: #fffdf0;

    --shadow:
        rgba(180, 119, 146, 0.14);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(248, 223, 233, 0.85),
            transparent 30%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(223, 242, 243, 0.95),
            transparent 32%
        ),

        var(--cream);

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height: 1.7;

    animation:
        pageFade 0.7s ease;
}


@keyframes pageFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


::selection {

    background: #f3cbd9;

    color: #8f5b70;

}


::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background: #fff5f8;
}


::-webkit-scrollbar-thumb {

    background: #e3b5c7;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {

    background: #ce91aa;

}


a {

    color: var(--deep-pink);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.page {

    width: min(1080px, 92%);

    margin:
        30px auto
        60px;
}


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

.header,
.page-header {

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--blush),
            var(--soft)
        );

    border:
        1px solid
        var(--line);

    border-radius: 25px;

    box-shadow:
        0 14px 35px
        var(--shadow);
}


.header {
    padding: 38px 20px;
}


.page-header {
    padding: 30px 20px;
}


.header h1,
.page-header h1 {

    margin: 8px 0;

    color:
        var(--deep-pink);

    font-weight: normal;

    letter-spacing: 2px;
}


.header h1 {

    font-size:
        clamp(
            45px,
            8vw,
            76px
        );
}


.page-header h1 {

    font-size:
        clamp(
            40px,
            7vw,
            62px
        );
}


.tagline {

    margin: 0;

    color:
        var(--muted);

    font-style: italic;
}


.tiny-text,
.tiny-caps {

    color:
        var(--muted);

    font-size: 11px;

    letter-spacing: 1.3px;
}


.tiny-caps {

    text-transform:
        uppercase;
}


.ornament,
.sparkles {

    color:
        var(--pink);

    letter-spacing:
        5px;
}


.sparkles {

    margin-top:
        10px;
}


/* =====================================================
   NAV
===================================================== */

.nav {

    margin:
        18px 0;

    padding:
        12px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    flex-wrap:
        wrap;

    background:
        var(--paper);

    border:
        1px solid
        var(--line);

    border-radius:
        18px;

    box-shadow:
        0 8px 20px
        var(--shadow);
}


.nav a,
.theme-button {

    border: 0;

    background:
        transparent;

    color:
        var(--deep-pink);

    text-decoration:
        none;

    padding:
        7px 10px;

    border-radius:
        10px;

    font:
        inherit;

    font-size:
        14px;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.nav a:hover,
.nav a.active,
.theme-button:hover {

    background:
        var(--soft);

    transform:
        translateY(-1px);
}


/* =====================================================
   GENERAL CARDS
===================================================== */

.card,
.post,
.home-section,
.featured-post,
.home-welcome,
.profile-card,
.welcome-banner,
.favorite-section,
.camera-roll,
.guestbook-form-card,
.guestbook-entries-card {

    background:
        var(--paper);

    border:
        1px solid
        var(--line);

    border-radius:
        19px;

    box-shadow:
        0 8px 22px
        var(--shadow);
}


.card,
.post,
.home-section,
.favorite-section,
.camera-roll,
.guestbook-form-card,
.guestbook-entries-card {

    padding:
        22px;
}


.card h2,
.post h2 {

    margin:
        0 0 10px;

    color:
        var(--deep-pink);

    font-weight:
        normal;
}


/* =====================================================
   HOME
===================================================== */

.home-welcome {

    display:
        grid;

    grid-template-columns:
        1fr 150px;

    align-items:
        center;

    gap:
        25px;

    padding:
        28px;

    margin-bottom:
        22px;

    background:
        linear-gradient(
            135deg,
            #fff0f6,
            #e4f5f5
        );
}


.welcome-copy h2 {

    margin:
        5px 0 9px;

    color:
        var(--deep-pink);

    font-size:
        34px;

    font-weight:
        normal;
}


.welcome-copy p {
    max-width:
        650px;
}


.welcome-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        15px;
}


.welcome-links a {

    color:
        var(--deep-pink);

    text-decoration:
        none;

    font-style:
        italic;

    font-size:
        13px;
}


.welcome-links a:hover {
    text-decoration:
        underline;
}


.welcome-stamp {

    width:
        130px;

    height:
        130px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    margin:
        auto;

    border:
        1px dashed
        #ca8ba3;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.8);

    color:
        var(--deep-pink);

    transform:
        rotate(5deg);
}


.stamp-bow {
    font-size:
        28px;
}


.stamp-word {

    font-size:
        25px;

    font-style:
        italic;
}


.stamp-small {

    font-size:
        8px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.home-layout {

    display:
        grid;

    grid-template-columns:
        225px
        minmax(0, 1fr);

    gap:
        22px;
}


.home-sidebar,
.content,
.home-content {

    min-width:
        0;
}


.home-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.home-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.current-home-item {

    padding:
        8px 0;

    border-bottom:
        1px dashed
        #e5cdd7;
}


.current-home-item:last-child {
    border-bottom:
        none;
}


.current-home-item span {

    display:
        block;

    color:
        #b48798;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.current-home-item b {

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        normal;
}


.mini-about p {
    font-size:
        13px;
}


.mini-about a {

    font-size:
        12px;

    text-decoration:
        none;

    font-style:
        italic;
}


.home-stats {

    font-size:
        12px;

    line-height:
        2;
}


.featured-post {

    position:
        relative;

    padding:
        28px;
}


.featured-label {

    margin-bottom:
        7px;

    color:
        #b47b91;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        1.3px;
}


.featured-post h2 {

    margin:
        5px 0 13px;

    color:
        var(--deep-pink);

    font-size:
        30px;

    font-weight:
        normal;
}


.post-date {

    color:
        #bd89a0;

    font-size:
        11px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.home-read-more {

    display:
        inline-block;

    margin-top:
        8px;

    color:
        var(--deep-pink);

    font-size:
        13px;

    text-decoration:
        none;

    font-style:
        italic;
}


.home-section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        15px;

    margin-bottom:
        15px;
}


.home-section-heading h2 {

    margin:
        3px 0 0;

    color:
        var(--deep-pink);

    font-size:
        25px;

    font-weight:
        normal;
}


.home-section-heading > a {

    color:
        #aa6a85;

    font-size:
        12px;

    text-decoration:
        none;

    font-style:
        italic;
}


.home-mini-photos {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        8px;
}


.home-photo {

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            145deg,
            #fff0f6,
            #e5f6f6
        );

    border:
        1px solid
        #ecd4dd;

    border-radius:
        10px;

    font-size:
        26px;

    text-decoration:
        none;

    color:
        inherit;
}


.home-photo:hover {

    transform:
        translateY(-3px);
}


.music-box {

    display:
        grid;

    grid-template-columns:
        80px 1fr;

    align-items:
        center;

    gap:
        17px;

    padding:
        22px;

    background:
        linear-gradient(
            135deg,
            #fff0f6,
            #f0f8f8
        );

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        19px;
}


.music-icon {

    width:
        67px;

    height:
        67px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        1px dashed
        #d5a6b9;

    font-size:
        31px;
}


.music-content h2 {

    margin:
        3px 0 5px;

    color:
        var(--deep-pink);

    font-size:
        25px;

    font-weight:
        normal;
}


.music-content p {

    margin:
        0 0 5px;

    color:
        #866a77;

    font-size:
        12px;
}


.music-content a {

    color:
        var(--deep-pink);

    font-size:
        12px;

    text-decoration:
        none;

    font-style:
        italic;
}


.fake-progress {

    width:
        100%;

    height:
        5px;

    overflow:
        hidden;

    background:
        #f1dce4;

    border-radius:
        20px;

    margin:
        8px 0;
}


.fake-progress span {

    display:
        block;

    width:
        37%;

    height:
        100%;

    background:
        #cb91a8;

    border-radius:
        20px;
}


.home-favorite-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        9px;
}


.home-favorite-card {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    padding:
        15px 8px;

    text-align:
        center;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        12px;

    color:
        #996479;

    text-decoration:
        none;

    font-size:
        11px;
}


.home-favorite-card span {
    font-size:
        25px;
}


.tiny-update {

    display:
        grid;

    grid-template-columns:
        60px 1fr;

    gap:
        15px;

    align-items:
        center;

    padding:
        20px;

    background:
        var(--yellow);

    border:
        1px solid
        #e7dec1;

    box-shadow:
        4px 6px 14px
        rgba(80, 65, 50, 0.07);

    transform:
        rotate(-0.8deg);
}


.tiny-update-decor {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        1px dashed
        #d8bfae;

    color:
        #c29d87;

    font-size:
        23px;
}


.tiny-update p {

    margin:
        2px 0;

    color:
        #8b7465;

    font-size:
        13px;

    font-style:
        italic;
}


/* =====================================================
   INTERNET EXTRAS
===================================================== */

.internet-extras {

    display:
        grid;

    grid-template-columns:
        0.8fr
        1.4fr
        0.8fr;

    gap:
        15px;

    margin:
        25px 0 18px;
}


.status-card,
.counter-card,
.mini-player {

    padding:
        18px;

    border-radius:
        17px;
}


.status-card {

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;
}


.status-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.online-dot {

    color:
        #8ebca2;

    font-size:
        11px;

    animation:
        blink 2s ease-in-out infinite;
}


@keyframes blink {

    0%,
    100% {
        opacity:
            1;
    }

    50% {
        opacity:
            0.35;
    }

}


.status-text {

    margin-top:
        9px;

    color:
        var(--deep-pink);

    font-size:
        20px;

    letter-spacing:
        1px;
}


.status-card p {

    margin-top:
        7px;

    color:
        #9b7b87;

    font-size:
        11px;
}


.mini-player {

    display:
        grid;

    grid-template-columns:
        75px 1fr;

    align-items:
        center;

    gap:
        15px;

    background:
        linear-gradient(
            135deg,
            #fff0f6,
            #e8f6f6
        );

    border:
        1px dashed
        #d9a8ba;
}


.record {

    width:
        68px;

    height:
        68px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        repeating-radial-gradient(
            circle,
            #d7a1b5 0px,
            #d7a1b5 2px,
            #edd5df 3px,
            #edd5df 5px
        );

    box-shadow:
        0 4px 10px
        rgba(100, 70, 85, 0.15);

    animation:
        recordSpin 8s linear infinite;
}


.record-center {

    width:
        22px;

    height:
        22px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #fff7fa;

    color:
        var(--deep-pink);

    font-size:
        12px;
}


@keyframes recordSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


.player-info h2 {

    margin:
        3px 0 0;

    color:
        var(--deep-pink);

    font-size:
        19px;

    font-weight:
        normal;
}


.player-info p {

    margin:
        1px 0 8px;

    color:
        #997785;

    font-size:
        11px;
}


.player-info a {

    color:
        var(--deep-pink);

    font-size:
        10px;

    text-decoration:
        none;

    font-style:
        italic;
}


.counter-card {

    text-align:
        center;

    background:
        var(--yellow);

    border:
        1px solid
        #e8dec0;

    box-shadow:
        3px 4px 10px
        rgba(80, 65, 50, 0.06);

    transform:
        rotate(1deg);
}


.visitor-number {

    display:
        inline-block;

    margin:
        8px 0;

    padding:
        5px 9px;

    background:
        #302a2e;

    color:
        #f7dbe5;

    border-radius:
        5px;

    font-family:
        "Courier New",
        monospace;

    font-size:
        18px;

    letter-spacing:
        2px;
}


.counter-hearts {

    color:
        #c6849e;

    font-size:
        10px;

    letter-spacing:
        3px;
}


.counter-card p {

    margin:
        5px 0 0;

    color:
        #987f71;

    font-size:
        10px;

    font-style:
        italic;
}


.site-update {

    text-align:
        center;

    margin:
        13px 0;

    color:
        #ae8b99;

    font-size:
        10px;

    letter-spacing:
        0.6px;

    font-style:
        italic;
}


/* =====================================================
   BADGES
===================================================== */

.button-shelf,
.badge-section {

    margin:
        25px 0;

    padding:
        18px;

    text-align:
        center;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        17px;
}


.site-buttons,
.badge-row {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        11px;
}


.site-buttons a {

    display:
        grid;

    place-items:
        center;

    min-width:
        88px;

    height:
        31px;

    padding:
        0 8px;

    background:
        linear-gradient(
            145deg,
            #f7dce7,
            #fff7fa
        );

    border:
        1px solid
        #d5a7b9;

    color:
        #9f617b;

    text-decoration:
        none;

    font-size:
        9px;

    letter-spacing:
        0.4px;

    box-shadow:
        2px 2px 0
        #e8c4d2;
}


.web-badge {

    width:
        88px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    background:
        linear-gradient(
            135deg,
            #f7d9e5,
            #fff7fa
        );

    border:
        1px solid
        #cf9db1;

    color:
        #986078;

    font-family:
        "Courier New",
        monospace;

    font-size:
        7px;

    line-height:
        1.05;

    letter-spacing:
        0.5px;

    box-shadow:
        2px 2px 0
        #e8c5d2;
}


.blue-badge {

    background:
        linear-gradient(
            135deg,
            #dff1f2,
            #f7ffff
        );

    border-color:
        #a8c9cb;

    color:
        #648f93;

    box-shadow:
        2px 2px 0
        #c4dfe1;
}


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

.diary-layout {

    display:
        grid;

    grid-template-columns:
        230px 1fr;

    gap:
        22px;
}


.diary-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.diary-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;
}


.archive {

    list-style:
        none;

    padding:
        0;

    margin:
        0;
}


.archive li {
    margin:
        6px 0;
}


.archive a {

    color:
        #a86a84;

    text-decoration:
        none;

    font-size:
        13px;
}


.archive-title {

    color:
        #b26d8b;

    font-size:
        13px;

    font-weight:
        bold;
}


.label {

    display:
        block;

    color:
        #b67a92;

    font-size:
        10px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.tags,
.entry-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.tags span,
.entry-tags span {

    display:
        inline-block;

    padding:
        4px 8px;

    background:
        #fff3f7;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        10px;

    color:
        #ad6b88;

    font-size:
        11px;
}


.diary-list {

    display:
        grid;

    gap:
        7px;

    margin:
        18px 0;

    padding:
        15px;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        13px;
}


.entry-decoration {

    text-align:
        center;

    color:
        #c58aa1;

    font-size:
        12px;

    margin:
        10px 0 18px;
}


.future-entry,
.writing-prompt {

    padding:
        28px 22px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #fff2f7,
            #eaf7f7
        );

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        18px;
}


.diary-entry:target {

    outline:
        2px dashed
        #d49ab2;

    outline-offset:
        4px;
}


/* =====================================================
   ABOUT
===================================================== */

.about-intro {

    display:
        grid;

    grid-template-columns:
        220px 1fr;

    gap:
        30px;

    align-items:
        center;

    padding:
        28px;

    margin-bottom:
        22px;

    background:
        #ffffff;

    border:
        1px solid
        #ead0db;

    border-radius:
        20px;

    box-shadow:
        0 8px 22px
        rgba(190, 130, 155, 0.08);
}


.about-photo {
    text-align:
        center;
}


.scrapbook-photo {

    width:
        200px;

    height:
        245px;

    margin:
        auto;

    position:
        relative;

    background:
        #fffdfc;

    border:
        1px solid
        #e7d8dc;

    box-shadow:
        6px 7px 0
            #f0d5df,

        0 10px 22px
            rgba(90, 60, 75, 0.13);

    transform:
        rotate(-3deg);

    overflow:
        hidden;
}


.scrapbook-photo::before {

    content:
        "";

    position:
        absolute;

    top:
        12px;

    left:
        12px;

    right:
        12px;

    bottom:
        52px;

    background:
        linear-gradient(
            145deg,
            #dff2f3,
            #fff0f6
        );

    border:
        1px solid
        #ead4dc;

    z-index:
        0;
}


.scrapbook-corner {

    position:
        absolute;

    top:
        7px;

    right:
        8px;

    font-size:
        25px;

    transform:
        rotate(9deg);

    z-index:
        3;
}


.scrapbook-shell {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -60%)
        rotate(5deg);

    font-size:
        70px;

    z-index:
        2;
}


.scrapbook-caption {

    position:
        absolute;

    left:
        18px;

    bottom:
        31px;

    color:
        #a86a83;

    font-size:
        17px;

    font-style:
        italic;

    z-index:
        3;
}


.scrapbook-stamp {

    position:
        absolute;

    bottom:
        9px;

    left:
        16px;

    color:
        #b894a2;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        1.5px;

    z-index:
        3;
}


.scrapbook-date {

    position:
        absolute;

    bottom:
        8px;

    right:
        13px;

    color:
        #c08da1;

    font-size:
        8px;

    letter-spacing:
        1px;

    z-index:
        3;
}


.scrapbook-photo::after {

    content:
        "";

    position:
        absolute;

    width:
        58px;

    height:
        18px;

    top:
        -5px;

    left:
        68px;

    background:
        rgba(249, 220, 231, 0.82);

    border:
        1px solid
        rgba(214, 177, 191, 0.5);

    transform:
        rotate(-4deg);

    z-index:
        5;
}


.about-text h2 {

    color:
        var(--deep-pink);

    font-size:
        30px;

    font-weight:
        normal;
}


.about-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

    margin-bottom:
        22px;
}


.about-list p {
    margin:
        7px 0;
}


.question {

    padding:
        13px 0;

    border-bottom:
        1px dashed
        #e2c5d1;
}


.question:last-child {
    border-bottom:
        none;
}


.question h3 {

    margin:
        0 0 4px;

    color:
        #b16e89;

    font-size:
        17px;

    font-weight:
        normal;
}


.little-card {

    padding:
        22px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #fff2f7,
            #e9f7f7
        );

    border:
        1px dashed
        #d7a6b9;

    border-radius:
        18px;

    margin-bottom:
        20px;
}


.cute-link {

    color:
        #aa6684;

    text-decoration:
        none;

    font-style:
        italic;
}


/* =====================================================
   FAVORITES
===================================================== */

.favorites-intro,
.photo-intro {

    padding:
        28px;

    margin-bottom:
        22px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #fff1f6,
            #e5f5f6
        );

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        20px;
}


.favorites-intro h2,
.photo-intro h2 {

    margin:
        6px 0 9px;

    color:
        var(--deep-pink);

    font-size:
        30px;

    font-weight:
        normal;
}


.favorite-items {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;

    margin-top:
        18px;
}


.favorite-item {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        13px;
}


.favorite-item > span {

    color:
        #c27e9b;

    font-size:
        18px;
}


.favorite-item b {

    display:
        block;

    color:
        #875f6f;

    font-size:
        13px;

    font-weight:
        normal;
}


.favorite-item small {

    display:
        block;

    margin-top:
        2px;

    color:
        #ae8b99;

    font-size:
        11px;
}


.favorites-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;
}


.monthly-pick {

    display:
        grid;

    grid-template-columns:
        85px 1fr;

    align-items:
        center;

    gap:
        18px;

    padding:
        27px;

    margin-top:
        5px;

    background:
        linear-gradient(
            135deg,
            #e2f4f5,
            #fff0f6
        );

    border:
        1px solid
        #e1d9dd;

    border-radius:
        20px;
}


.monthly-icon {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        1px dashed
        #d9a8ba;

    color:
        #bd7694;

    font-size:
        29px;

    transform:
        rotate(-6deg);
}


.monthly-pick h2 {

    margin:
        4px 0 7px;

    color:
        var(--deep-pink);

    font-size:
        27px;

    font-weight:
        normal;
}


.obsession-cloud {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        18px;
}


.obsession-cloud span {

    padding:
        9px 13px;

    background:
        #fff4f8;

    border:
        1px solid
        #ecd0dc;

    border-radius:
        20px;

    color:
        #a66782;

    font-size:
        12px;
}


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

.photo-wall {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        30px 24px;

    margin-bottom:
        35px;

    padding:
        10px;
}


.polaroid {

    position:
        relative;

    margin:
        0;

    padding:
        11px 11px 19px;

    background:
        #fff;

    border:
        1px solid
        #ddd6d9;

    box-shadow:
        0 10px 18px
        rgba(80, 60, 70, 0.15);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.polaroid:hover {

    transform:
        translateY(-6px)
        rotate(0deg)
        scale(1.02);

    box-shadow:
        0 16px 25px
        rgba(80, 60, 70, 0.18);

    z-index:
        5;
}


.polaroid-one {
    transform:
        rotate(-2deg);
}


.polaroid-two {
    transform:
        rotate(2.5deg);
}


.polaroid-three {
    transform:
        rotate(-1deg);
}


.polaroid-four {
    transform:
        rotate(2deg);
}


.polaroid-five {
    transform:
        rotate(-2.5deg);
}


.polaroid-six {
    transform:
        rotate(1deg);
}


.photo-frame {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            140deg,
            #e1f3f4,
            #fff0f6
        );

    border:
        1px solid
        #ead7de;
}


.photo-frame img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.photo-frame.no-photo::before {

    content:
        "📷";

    font-size:
        45px;

    opacity:
        0.75;
}


.polaroid figcaption {

    padding-top:
        11px;

    color:
        #795c68;

    text-align:
        center;

    font-size:
        13px;

    font-style:
        italic;
}


.tape {

    position:
        absolute;

    top:
        -9px;

    left:
        50%;

    width:
        64px;

    height:
        21px;

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

    background:
        rgba(247, 216, 228, 0.82);

    border:
        1px solid
        rgba(210, 174, 188, 0.5);
}


.mini-photo-grid {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        10px;
}


.mini-photo {

    aspect-ratio:
        1 / 1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    background:
        linear-gradient(
            145deg,
            #fff0f6,
            #e6f6f6
        );

    border:
        1px solid
        #ead3dd;

    border-radius:
        10px;

    text-decoration:
        none;

    color:
        inherit;
}


.mini-photo span {
    font-size:
        25px;
}


.mini-photo small {

    color:
        #a17d8c;

    font-size:
        9px;

    text-align:
        center;
}


.photo-categories {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

    margin-bottom:
        24px;
}


.category-card {

    padding:
        22px;

    text-align:
        center;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        17px;
}


.category-icon {

    font-size:
        34px;

    margin-bottom:
        6px;
}


.category-card h3 {

    margin:
        3px 0 5px;

    color:
        var(--deep-pink);

    font-size:
        20px;

    font-weight:
        normal;
}


.category-card p {

    margin:
        0;

    color:
        #8b6d78;

    font-size:
        12px;
}


.photo-note {

    position:
        relative;

    max-width:
        600px;

    margin:
        5px auto 25px;

    padding:
        25px 28px;

    text-align:
        center;

    background:
        var(--yellow);

    border:
        1px solid
        #eadfc0;

    box-shadow:
        4px 6px 14px
        rgba(80, 65, 50, 0.09);

    transform:
        rotate(-1deg);
}


.photo-note p {

    margin:
        4px 0;

    color:
        #8b7460;

    font-style:
        italic;
}


/* =====================================================
   GUESTBOOK
===================================================== */

.guestbook-intro {

    display:
        grid;

    grid-template-columns:
        90px 1fr;

    align-items:
        center;

    gap:
        20px;

    padding:
        25px;

    margin-bottom:
        22px;

    background:
        linear-gradient(
            135deg,
            #fff0f6,
            #e6f6f6
        );

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        20px;
}


.envelope {

    width:
        72px;

    height:
        72px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        1px dashed
        #d9a8ba;

    font-size:
        34px;

    transform:
        rotate(-5deg);
}


.guestbook-intro h2 {

    margin:
        4px 0 7px;

    color:
        var(--deep-pink);

    font-size:
        29px;

    font-weight:
        normal;
}


.section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        18px;
}


.section-title > span {

    color:
        #bd7895;

    font-size:
        32px;
}


.section-title h2 {

    margin:
        0;

    color:
        var(--deep-pink);

    font-size:
        27px;

    font-weight:
        normal;
}


#guestbookForm {

    display:
        grid;

    gap:
        9px;
}


#guestbookForm label {

    color:
        #9a7886;

    font-size:
        12px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


#guestbookForm input,
#guestbookForm textarea {

    width:
        100%;

    padding:
        11px 13px;

    border:
        1px solid
        #ead0db;

    border-radius:
        12px;

    background:
        #fffafd;

    color:
        #745b67;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    outline:
        none;
}


#guestbookForm textarea {

    min-height:
        125px;

    resize:
        vertical;
}


.form-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        7px;
}


.character-count {

    color:
        #ad8a98;

    font-size:
        11px;
}


.guestbook-button {

    padding:
        11px 17px;

    border:
        1px solid
        #d09ab0;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #f9dfe9,
            #f5eaf0
        );

    color:
        #a45f7d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    cursor:
        pointer;
}


.guestbook-note {

    margin-top:
        13px;

    color:
        #ad8d99;

    font-size:
        11px;

    text-align:
        center;

    font-style:
        italic;
}


.guestbook-entries {

    display:
        grid;

    gap:
        13px;
}


.guest-entry {

    position:
        relative;

    padding:
        17px 18px;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        14px;
}


.guest-entry::before {

    content:
        "♡";

    position:
        absolute;

    top:
        8px;

    right:
        12px;

    color:
        #d49ab2;

    font-size:
        14px;
}


.guest-entry-name {

    color:
        #a96080;

    font-size:
        14px;

    font-weight:
        bold;
}


.guest-entry-date {

    margin-left:
        5px;

    color:
        #b1939e;

    font-size:
        10px;
}


.guest-entry-message {

    margin-top:
        7px;

    color:
        #755c68;

    font-size:
        14px;

    white-space:
        pre-wrap;
}


.empty-guestbook {

    padding:
        28px;

    text-align:
        center;

    background:
        linear-gradient(
            145deg,
            #fff7fa,
            #f0f8f8
        );

    border:
        1px dashed
        #dec5cf;

    border-radius:
        15px;
}


.empty-envelope {

    color:
        #cc89a4;

    font-size:
        29px;
}


.empty-guestbook p {

    margin:
        6px 0 2px;

    color:
        #a96b85;
}


.empty-guestbook small {

    color:
        #ad8c99;

    font-size:
        11px;
}


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

.secret-page {

    display:
        grid;

    place-items:
        center;

    padding:
        25px;
}


.secret-wrap {

    width:
        min(650px, 94%);

    text-align:
        center;
}


.secret-card {

    padding:
        40px 28px;

    background:
        linear-gradient(
            145deg,
            #f8dfe9,
            #fff3f7
        );

    border:
        1px solid
        #ead0db;

    border-radius:
        25px;

    box-shadow:
        0 16px 40px
        var(--shadow);
}


.secret-card h1 {

    margin:
        8px 0 12px;

    color:
        var(--deep-pink);

    font-weight:
        normal;
}


.secret-heart {

    margin:
        12px auto;

    font-size:
        60px;

    color:
        var(--deep-pink);
}


.secret-message {

    min-height:
        48px;

    margin:
        20px 0;

    color:
        var(--deep-pink);

    font-style:
        italic;
}


.back-link {

    display:
        inline-block;

    margin-top:
        12px;

    text-decoration:
        none;
}


.secret-stars {

    color:
        var(--pink);

    letter-spacing:
        8px;

    margin:
        18px 0;
}


/* =====================================================
   CURSOR + EFFECTS
===================================================== */

.mouse-heart {

    position:
        fixed;

    left:
        0;

    top:
        0;

    pointer-events:
        none;

    z-index:
        99999;

    color:
        #c7839d;

    font-size:
        15px;

    transform:
        translate(-50%, -50%);

    opacity:
        0;
}


.click-sparkle {

    position:
        fixed;

    pointer-events:
        none;

    z-index:
        100000;

    color:
        #d49ab2;

    font-size:
        14px;

    transform:
        translate(-50%, -50%);

    animation:
        sparkle-float 750ms ease-out
        forwards;
}


@keyframes sparkle-float {

    0% {

        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {

        opacity:
            0;

        transform:
            translate(-50%, -85px)
            scale(0.3);
    }

}


.decor-heart {

    position:
        fixed;

    pointer-events:
        none;

    z-index:
        9990;

    color:
        #dda8bb;

    font-size:
        12px;

    animation:
        decorFloat 2.5s ease-out
        forwards;
}


@keyframes decorFloat {

    0% {

        opacity:
            0;

        transform:
            translateY(10px)
            scale(0.7);
    }

    15% {

        opacity:
            0.8;
    }

    100% {

        opacity:
            0;

        transform:
            translateY(-70px)
            scale(1);
    }

}


.back-to-top {

    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #d6a6b8;

    border-radius:
        50%;

    background:
        #fff4f8;

    color:
        var(--deep-pink);

    text-decoration:
        none;

    font-size:
        16px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


.back-to-top.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}


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

@media (max-width: 850px) {

    .home-layout,
    .diary-layout {

        grid-template-columns:
            1fr;
    }


    .home-sidebar,
    .diary-sidebar {

        order:
            2;
    }


    .home-content,
    .diary-content {

        order:
            1;
    }


    .favorites-grid,
    .about-grid,
    .photo-categories {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .photo-wall {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .mini-photo-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .internet-extras {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .home-welcome {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .welcome-links {

        justify-content:
            center;
    }


    .home-mini-photos {

        grid-template-columns:
            repeat(3, 1fr);
    }


    .home-favorite-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .about-intro {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .about-grid,
    .favorites-grid,
    .photo-categories {

        grid-template-columns:
            1fr;
    }


    .photo-wall {

        grid-template-columns:
            1fr;

        max-width:
            340px;

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .mini-photo-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .guestbook-intro {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .envelope {

        margin:
            auto;
    }


    .form-bottom {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .guestbook-button {

        width:
            100%;
    }


    .monthly-pick {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .monthly-icon {

        margin:
            auto;
    }


    .music-box {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .music-icon {

        margin:
            auto;
    }


    .tiny-update {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .tiny-update-decor {

        margin:
            auto;
    }

}/* =====================================================
   ATABOOK GUESTBOOK
===================================================== */

.atabook-wrap {
    width: 100%;
    margin-top: 18px;
    overflow: hidden;

    background: #fffafd;

    border: 1px solid #ead0db;
    border-radius: 16px;

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


.atabook-frame {
    display: block;

    width: 100%;
    height: 720px;

    border: 0;

    background: #ffffff;
}


@media (max-width: 700px) {

    .atabook-frame {
        height: 760px;
    }

}/* =====================================================
   SECRET PAGE UPGRADE ♡
===================================================== */

.secret-moon {

    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    margin: 12px auto 16px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff8fb,
            #e7f5f5
        );

    border:
        1px dashed
        #d7a6b9;

    color:
        var(--deep-pink);

    font-size: 40px;

    box-shadow:
        0 8px 20px
        rgba(180, 119, 146, 0.09);

}


.secret-intro {

    max-width: 480px;

    margin-left: auto;
    margin-right: auto;

    font-style: italic;

}


.secret-message-box {

    margin:
        28px 0;

    padding:
        23px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border:
        1px dashed
        #d7a6b9;

    border-radius:
        18px;

}


.secret-message-box button {

    margin-top:
        12px;

}


.secret-section {

    margin-top:
        30px;

    padding-top:
        24px;

    border-top:
        1px dashed
        #e1becd;

}


.secret-section h2 {

    margin:
        5px 0 16px;

    color:
        var(--deep-pink);

    font-weight:
        normal;

}


.secret-note-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

}


.secret-note {

    padding:
        16px 13px;

    background:
        #fffafd;

    border:
        1px solid
        #edd4df;

    border-radius:
        14px;

    box-shadow:
        3px 5px 12px
        rgba(100, 70, 85, 0.06);

}


.secret-note:nth-child(1) {

    transform:
        rotate(-1deg);

}


.secret-note:nth-child(2) {

    transform:
        rotate(1deg);

}


.secret-note:nth-child(3) {

    transform:
        rotate(-0.5deg);

}


.secret-note > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #c2889f;

    font-size:
        10px;

    letter-spacing:
        1.5px;

}


.secret-note p {

    margin:
        0;

    font-size:
        12px;

    line-height:
        1.6;

}


.secret-nightstand {

    display:
        grid;

    gap:
        9px;

    max-width:
        390px;

    margin:
        14px auto 0;

}


.secret-nightstand div {

    padding:
        10px 13px;

    background:
        #fff5f8;

    border:
        1px dashed
        #d9a8ba;

    border-radius:
        12px;

    font-size:
        12px;

}


.secret-rules p {

    margin:
        7px 0;

    color:
        #8f6d7c;

    font-size:
        13px;

    font-style:
        italic;

}


.secret-back {

    margin-top:
        30px;

}


@media (max-width: 650px) {

    .secret-card {

        padding:
            32px 20px;

    }


    .secret-note-grid {

        grid-template-columns:
            1fr;

    }


    .secret-note {

        transform:
            none !important;

    }

}