/* ---------- BODY ---------- */

body{
    margin:0;
    padding:40px;
    background:#FFF9F3;
    color:#6F5643;
    font-family:Verdana, sans-serif;

    /* Tiny dotted background */
    background-image:
        radial-gradient(#D7E5D2 1.5px, transparent 1.5px);
    background-size:22px 22px;
}

/* ---------- CONTAINER ---------- */

.container{

    max-width:1100px;

    width:100%;

    margin:auto;

}

/* ---------- HEADER ---------- */

header{

margin-bottom:25px;

}

.banner{

height:260px;

border-radius:28px;

background:linear-gradient(180deg,#DCEAD7,#C8DEBF);

display:flex;

justify-content:center;

align-items:center;

text-align:center;

border:3px dashed white;

box-shadow:0 10px 20px rgba(0,0,0,.08);

position:relative;

overflow:hidden;

}

/* ---------- MAIN LAYOUT ---------- */

.layout{

display:grid;

grid-template-columns:240px 2fr 240px;

gap:20px;

margin-top:25px;

align-items:flex-start;

}

/* ---------- CARDS ---------- */

.card{

    position:relative;

    background:#fffefb;

    padding:22px;

    margin-bottom:20px;

    border-radius:24px;

    border:2px solid #D7E5D2;

    box-shadow:
        0 10px 18px rgba(0,0,0,.06);

   transition:
transform .3s ease,
box-shadow .3s ease;

}

.clickable-card:hover{

transform:translateY(-8px) rotate(-0.5deg) scale(1.01);

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

}

.clickable-card::after{

content:"";

position:absolute;

inset:0;

border-radius:24px;

background:linear-gradient(
180deg,
rgba(255,255,255,.35),
transparent
);

opacity:0;

transition:.3s;

pointer-events:none;

}

.clickable-card:hover::after{

opacity:1;

}

/* ---------- PROFILE ---------- */

.profile{

    width:100%;

    border-radius:20px;

    border:3px solid white;

    box-shadow:0 5px 10px rgba(0,0,0,.08);

    background:#F5FBF3;

}

/* ---------- MENU ---------- */

.menu{
    list-style:none;
    padding:0;
}

.menu li{
    margin-bottom:12px;
}

.menu a{
    display:block;
    padding:14px;
    background:#F5FBF3;
    border-radius:14px;

    text-decoration:none;
    color:#6F5643;
    font-weight:bold;

    transition:.25s;
}

.menu a:hover{
    background:#D7E5D2;
    transform:translateX(6px);
}


.card::before{

content:"";

position:absolute;

width:80px;

height:18px;

background:#F7D8E8;

opacity:.7;

top:-8px;

left:25px;

border-radius:4px;

transform:rotate(-3deg);

}

footer{

margin-top:40px;

text-align:center;

font-size:14px;

color:#8A7A6D;

}

.quote{

margin-top:20px;

padding:18px;

background:#F5FBF3;

border-left:5px solid #A8C3A0;

border-radius:12px;

font-style:italic;

}

h3{

    margin-bottom:8px;

    color:#7C9473;

}

.tea-button{
    display:inline-block;

    background:#A8C3A0;
    color:white;

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

    box-shadow:0 6px 15px rgba(0,0,0,.08);
}

.tea-button:hover{
    background:#8BAE82;
    transform:translateY(-3px);
}

header::before{

    content:"🍃";

    position:absolute;

    top:20px;

    left:30px;

    font-size:28px;

    opacity:.5;

}

header::after{

    content:"🌼";

    position:absolute;

    bottom:20px;

    right:30px;

    font-size:24px;

    opacity:.5;

}

a{

transition:.25s;

}

a:hover{

opacity:.75;

}

.intro{

    text-align:center;
    font-size:18px;
    line-height:1.7;

}

.hero-image{

    height:260px;

    background:#F5FBF3;

    border:2px dashed #A8C3A0;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#7C9473;

    font-size:22px;

    margin:25px 0;

}

.banner-text h1{

margin:0;

font-size:56px;

color:#5C4A3E;

}

.banner-text p{

font-size:22px;

margin-top:12px;

color:#6F5643;

}

hr{

border:none;

height:2px;

background:#E6EFE3;

margin:20px 0;

}

#greeting{

text-align:center;

}

#greeting h1{

margin:10px 0;

font-size:38px;

color:#7C9473;

}

#greeting h2{

margin:0;

}

#greeting p{

margin-top:15px;

font-style:italic;

}


/* Hide the normal cursor */

html,
body,
a,
button,
input,
textarea,
select,
.menu li,
.menu a{
    cursor:none !important;
}

/* Floating Mochi */

#cursor{
    position:fixed;
    width:80px;
    height:80px;
    top:0;
    left:0;
    z-index:99999999;
    pointer-events:none;
    transform:translate(-15px,-8px);
  
}

#cursor img{
    width:100%;
    height:100%;
}

/* ✿ Cozy Particle Trail */

/* 🍡 Mochi Magic */

.particle{

    position:fixed;

    pointer-events:none;

    user-select:none;

    z-index:9999998;

    opacity:1;

    animation:mochiMagic 1.2s ease-out forwards;

}

@keyframes mochiMagic{

    0%{

        opacity:0;

        transform:
            translate(-50%,-10px)
            scale(.4)
            rotate(0deg);

    }

    15%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translate(
                calc(-50% + var(--drift)),
                28px
            )
            scale(1)
            rotate(35deg);

    }

}

/* Playlist Widget */

.album-cover{

width:120px;

height:120px;

margin:15px auto;

border-radius:18px;

background:#DCEAD7;

display:flex;

justify-content:center;

align-items:center;

font-size:48px;

border:2px dashed white;

}

.song-title{

text-align:center;

margin-bottom:5px;

}

.artist{

text-align:center;

margin-top:0;

color:#8A7A6D;

}

.music-buttons{

display:flex;

justify-content:center;

gap:10px;

margin-top:18px;

}

.music-buttons button{

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#A8C3A0;

color:white;

font-size:18px;

cursor:pointer;

transition:.25s;

}

.music-buttons button:hover{

transform:scale(1.08);

background:#8BAE82;

}

/* 📼 Cassette Player */

.cassette{

width:155px;

height:100px;

margin:18px auto;

background:#DCEAD7;

border:3px solid white;

border-radius:18px;

position:relative;

box-shadow:0 5px 10px rgba(0,0,0,.08);

display:flex;

justify-content:space-between;

align-items:center;

padding:0 18px;

}

.label{

text-align:center;

flex:1;

}

.tape-title{

font-weight:bold;

font-size:14px;

color:#5C4A3E;

}

.tape-subtitle{

font-size:11px;

color:#7C9473;

margin-top:4px;

}

.reel{

width:30px;

height:30px;

border-radius:50%;

background:white;

border:3px solid #A8C3A0;

position:relative;

}

.reel::before{

content:"";

position:absolute;

width:8px;

height:8px;

background:#A8C3A0;

border-radius:50%;

top:50%;

left:50%;

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

}

@keyframes spinTape{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.cassette.playing .reel{

animation:spinTape 2s linear infinite;

}

/* ☕ Notice Board */

.notice-board{

display:grid;

gap:12px;

margin:25px 0;

}

.notice{

background:#F5FBF3;

padding:14px;

border-radius:14px;

border:2px dashed #D7E5D2;

transition:.25s;

}

.notice:hover{

transform:translateX(5px);

background:#EEF8EB;

}

/* 🌸 Scrapbook Stickers */

.sticker{

position:absolute;

font-size:34px;

user-select:none;

pointer-events:none;

animation:floatSticker 4s ease-in-out infinite;

}

.strawberry{

top:20px;

left:40px;

}

.flower{

top:35px;

right:70px;

animation-delay:1s;

}

.leaf{

bottom:25px;

left:80px;

animation-delay:2s;

}

.mochi{

bottom:20px;

right:40px;

animation-delay:3s;

}

@keyframes floatSticker{

0%,100%{

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

}

50%{

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

}

}

/* 📸 Gallery */

.gallery-grid{

display:grid;

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

gap:24px;

margin-top:30px;

}

.polaroid{

background:white;

padding:12px;

border-radius:10px;

box-shadow:0 8px 15px rgba(0,0,0,.08);

transform:rotate(-2deg);

transition:.3s;

text-align:center;

}

.polaroid:nth-child(even){

transform:rotate(2deg);

}

.polaroid:hover{

transform:rotate(0deg) scale(1.05);

}

.photo{

height:180px;

background:#F5FBF3;

border-radius:8px;

display:flex;

justify-content:center;

align-items:center;

font-size:50px;

margin-bottom:12px;

}

/* 🍓 Latest Journal Preview */

.latest-post{

margin-top:10px;

padding:20px;

background:#F5FBF3;

border:2px dashed #D7E5D2;

border-radius:18px;

}

.latest-post h3{

margin-top:0;

}

.latest-post h4{

margin-bottom:10px;

color:#5C4A3E;

}

.latest-post p{

line-height:1.6;

margin-bottom:18px;

}

/* Guestbook */

.guest-entry{

padding:12px 0;

}

.guest-entry h3{

margin-bottom:8px;

}

.guest-entry p{

line-height:1.6;

font-style:italic;

}